bildirgec.org - CodeMachine - beğendikleri

web tasarımcıları için ücretsiz 43 icon paketi

CodeMachine — Thu, 03 Apr 2008 16:06:00 GMT

çoğu zaman ihtiyaç duyduğumuz ve kullandığımız ikonlar vardır. hiçbir zaman bunlara bakmaya doyamayız ve sürekli değiştirme ihtiyacı hissederiz. işinizi kolaylaştırmak için aşağıda 39 adet icon sitesi tanıtmaya çalıştım, faydalı olması dileğiyle:

15. numaraya dikkatli bakmanızı tavsiye ederim.

1. fam fam fam

uygulama, takvim, tarih, zaman, yorum vb. küçük web iconlarıdır.

2. brand spanking new

web sitelerinizde kullanabileceğiniz gri mini icon paketidir.

3. pinvoke

web sitenizdeki eklentilerde veya temalarınızda kullanabileceğiniz zengin içerikli ve renkli bir icon paketidir.

4. sweetie

web 2.0 tasarımınıza uygun mini iconlar.

5. random jabber

daha çok mesajlar, uyarılar ve yönlendirmeler üzerine bir icon paketi.

6. two tone icons

birçok farklı projelerinizde kullaabileceğiniz kare kalıplar içine sade olarak tasarlanmış zengin bir icon paketidir.

7. exploding boy

küçük projelerde yada uygulamalarda kullanılabilecek kısıtlı bir icon paketidir.

8. strawbee

uygulamalarda kullanabileceğiniz bir icon paketidir. eski sıkıcı icon görünümüne sahiptir.

9. kurumizawa

gri ve renkli icon paketidir. rss iconları güzel ve kullanışlıdır. deviantart üyesi geliştirmektedir.

10. n design

web sitesi için mini sayfa iconlarıdır.

11. greyscale

gri icon paketidir, klasik görünüme sahiptir.

12. minimal icons 1.8.6

zengin içeriğe sahip renkli mini icon paketidir. sryo isimli deviantart üyesi geliştirmektedir.

13. asp net icons

asp.net icon paketidir. asp.net üzerine uygulama geliştiriyor yada kod yayımlıyorsanız faydalı olabilir.

14. bs-markup

güzel bir icon paketidir. siyah beyaz, gri ve renkli iconlar mevcuttur.

15. fast icons

çok güzel rss iconları mevcuttur. kahve fincanının içinde rss logosu, tuvalette gazete okuyan anime bir karakter ve gazetenin üzerinde rss resmi gibi.

16. glyph lab

bol renkli zengin bir icon paketidir. tasarımı daha çok pc uygulamaları içindir.

17. graphic push

minik rss ve xml icon paketidir. renk seçenekleri sayesinde farklı site tasarımlarında kullanılabilir.

18. pixeley

websiteicons'un yayımladığı bir icon paketidir. gri renklidir. web sitelerinde ve eklentilerde bol bol görmekteyiz zaten.

19. zeusboxstudio

zeusboxstudio tarafından geliştirilen ücretsiz rss icon paketi. özelleştirilmiş rss beslemeleriniz için çeşitli alternatifler mevcut.

20. dslr icon

harika bir dslr objektif iconu

21. kirli rss icon

kirli yada eskitilmiş stildeki tasarımınız için kirli rss iconlar.

22. kalp rss

kalp şeklinde tasarlanmış rss iconları.

devamı:

23. spheres icons farklı icon paketleride mevcuttur.
24. gorts icons eski konsol oyunlarındaki karakterler.
25. bitcons 6. numaradaki icon paketine benzemektedir.
26. beauticons fredy, aple donanım, ofis araçları, harici disk, püro, çöp kutusu, kasa gibi icon paketleri mevcuttur. mutlaka bakın.
27. icon kits üyelik şartı var.
28. yellow icons gördüğüm en harika tasarımlı sitelerden biri diyebilirim. güzel icon paketleri mevcuttur.
29. studio twenty eight cs3 vb. icon paketleri mevcuttur. tekli iconlarda vardır.
30. vista icons vista için değiştirilebilir icon paketleri.
31. icon base 7 adet ücretsiz icon vardır. paralı bir sitedir.
32. website icons web site iconlarının yayımlandığı bir sitedir. kategorilere göre gezebilirsiniz.
33. feed icons farklı renklerde feed icon seti.
34. ganato free icons 24 icon paketi yayımlamaktadır.
35. free icons web more, new vb. iconları kullanılabilir.
36. clickfire favicons duke nukem iconları
37. icon shock paralı bir icon sitesi olmasına rağmen çok güzel ücretsiz icon paketleride sunmaktadır. anime karakter setleri oldukça güzel.
38. damien g icons pixel tasarımlı siteler için pixel icon.
39. icon bulk büyük iconların bulunduğu bir sitedir. ilginç iconlar mevcuttur, logo niyetine bile kullanılabilir.
40. aura bir adet ücretsiz icon paketi mevcuttur.
41. marvilla paralı ve ücretsiz icon paketleri yayımlamaktadır.
42. icon shock farklı kategorilerde eski tip iconlar yayımlamaktadır.
43. icons online 8 kategori altında iconlar yayımlamaktadır.

farklı ihtiyaçlarınız için icon arayabileceğiniz ikon arama motorları:

kaynaklar:
speckyboy - internet

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

30 En İyi Flash Bileşeni

CodeMachine — Sat, 25 Jul 2009 10:39:00 GMT

Flash ile yapılan tasarımlar animasyon ağırlıklı olduğu için kullanıcının dikkatini daha fazla çekmeyi başarıyor. Bu yazıda siteniz için kullanabileceğiniz en iyi flash bileşenlerine ulaşabilirsiniz.

1. flow list

3 boyutlu animasyon akışı oluşturmak için çok güzel bir bileşen. Kolayca entegre edilebilir.

2. 360 view image rotator

Oynatma/durdurma özelliği ile 360 derece döner. Swf dosyasını kolayca düzenleyebilirsiniz.

3. countdown timer

Belilrli bir süreden kalan zaman oluşturmak için kullanabileceğiniz bileşen.

4. obedit

Flash tabanlı zengin metin editörü düzenleyicisidir. Kullanışlı birçok özellik içermektedir.

5. map

Coğrafi konumları görüntülemenizi sağlayan harita bileşeni.

6. flash bookmarks

Ücretsiz sosyal imleme bileşeni. Bu bileşen sayesinde sayfanıza popüler imleme sitelerinin linklerini ekleyebilirsiniz.

7. spinning preloader

Actionscript 3 ile Flash 3'de yapılmış tamamen kişiselleştirilebilir yükleniyor bileşeni.

8. toobplayer

Youtube videolarını oynatabileceğiniz güzel bir video oynatıcı.

9. suprasliderbasic

10. sindot

Çeşitli dalgalı çizimler oluşturabileceğiniz bileşen.

11. jc play list

Gelişmiş multimedya görüntüleyicisidir. Numaralandırma, ek bilgi, açıklama, başlık gibi bilgiler yer almaktadır.

12. movie credits

Ücretsiz film sonu tanıtma yazısı bileşeni.

13. the classic progress bar

Ücretsiz klasik ilerleme bileşeni. Herhangi bir flash nesnesi yüklenirken bu bileşeni ekranda görüntüleyebilirsiniz.

14. 3d walker gallery xml

Fotoğraf, cd, dergi, ürünler için galeriler oluşturabilirsiniz.

15. 3d scene

3d sahne oluşturmak için kullanabileceğiniz faydalı bir bileşen.

yazının devamı için buraya tıklayın.

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

ücretsiz flash fotoğraf galerisi

çok aranan 10 flash dersi

youtube'dan 60+ müthiş flash cs4 dersi

25 güzel ve yaratıcı flash e-ticaret sitesi

i̇lham kaynağı olabilecek 13 yaratıcı flash preloader (yükleniyor) uygulaması

kaynak: ajaxline.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

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

tasarımcılar için ücretsiz kaynaklar

CodeMachine — Fri, 17 Jul 2009 09:18:00 GMT

daha önce ücretsiz tasarım öğeleri yazısında verdiğimiz kaynaklara ek olarak tasarımlarınızda yararlanabileceğiniz diğer öğeler:

tasarım nesneleri arama motoru yazısı da ilginizi çekebilir.

tüm yazılarım - kaynak

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

formlar için jquery eklentileri

CodeMachine — Sun, 10 May 2009 09:25:00 GMT

daha önce jquery menü eklentileri yazısında jquery'yi site menülerinizde kullanmanız için birkaç eklentiden bahsetmiştik. bu kez de form bölümlerinizi geliştirebileceğiniz çeşitli eklentiler:

tüm yazılarım - kaynak

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

CodeMachine — 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ı CodeMachine 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

50 adet şık illüstrasyon dersi

CodeMachine — Sat, 24 Jan 2009 13:02:00 GMT

tasarımı sevenlerin ve en çok da işin vektörel tarafına yoğunlaşmak isteyenlerin çalışabileceği, kendini geliştirebileceği ve ihtiyacı olabilecek bazı teknikleri nasıl kavrayabileceğini gösteren 50 güzel ders var huzurlarınızda. illüstrasyonda daha etkin ve hızlı olmak için kullanabileceğiniz adobe illustrator için 26 açıklamalı kısayol da sizleri bekliyor.

aşağıdaki örneklemeler dışında illüstrator araçlarını nasıl kullancabileceğinize dair derslerde güzel bir şekilde işlenmişler.

gözlük

vektörel portre çalışması

gerçekçi bir elmas

pusula

imac

listenin tamamına ve diğer derslere ulaşmak için buyrun.

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

yaratıcılığınızı arttıracak 12 ücretsiz 3d metin efekti dersi

CodeMachine — Sun, 25 Jan 2009 11:38:00 GMT

daha önce yepyeni 3d tipografi örneklerinden bahsedip sonrasında da 10 adet ücretsiz Photoshop 3d metin efekti dersine değinmiştik.
bu bildiride ise bir önceki kaldığımız yerden devam edip çalışmalarınızda kullanmayı isteyebileceğiniz 12 adet ücretsiz Photoshop 3d metin efekti dersini sizler için bir araya topladım.
1- duman efekti

2- Bubble Text

3- 3D Graffiti

4- Retro Pop Style

5- Reflective Liquid Type

6- Unique 3D Text

7- metal 3d metin efekti

8- Rain Drops

9- Papercraft 3d Text Effect

10- Ironman Text Effect

11- Candy Text Effect

12- sand text

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

Okuyarak değil seyrederek öğren

CodeMachine — Mon, 26 Jan 2009 14:18:00 GMT

Sizlere, ücretsiz görüntülü ders hizmeti veren Birkaç websitesinden bahsedeceğim. Bu sitelerde istediğiniz herhangi bir programlama dilini arkanıza yaslanıp seyrederek öğrenebilirsiniz.

http://www.webhocam.net/images/logo.gif

EgitimOfis: bu konuda tanıtacağımız ilk websitemiz. Ücretsiz ve üyelik gerekmeden seyredebileceğiniz bu güzel dersleri, tecrübeli, işi bilen kişilerce anlatılıyor. Benim favorim php dersleri, toplam 55 adet php dersi bulunuyor sitede. Tabi siz ilgi alanınıza göre asp dersleri, delphi dersleri, html dersleri vb... seyrdebilirsiniz.

WebHocam: türkçe görüntülü ders hizmeti sunan kaliteli bir başka site. Bu da tamamen ücretsiz ve üye olmaksızın dersleri takip edebilirsiniz. Burada da yine html, asp, visual basic.net, fireworks vb. dersleri izleyicilerini bekliyor. Hepsine aynı sayfadan göz atabilirsiniz. Üstelik istediğiniz dersi bilgisayarınıza da indirebilirsiniz.

webhocam logo

BilgiPortal: Görüntülü dersleri kullanıcıların istifadesine sunan başka bir site daha. Yukarıdaki sitelerenden farklı olarak bu sitede programlamadan ziyade “nasıl yapılır?” sorusuna derman olmak için tasarlanmış. Örneğin gmail hesabının outlook ile entagrasyonu, windowsu hazırda bekletmeye almak vs.. muhtelif konulara ait ufak çözümler görüntülerle anlatılıyor.

VideoDersler: Sen ne yaptın abi ya, ben bu sene öss ye gireceğim. Zamanımı php'ye asp'ye veremem. Ders çalışmam lazım benim, diyenler için oluşturulmuş başka görsel bir site. Türkçe, matematik,fizik, kimya, biyoloji vs. buradan takip edilebilir.

UzmanWeb: burada programlama dersleri yok ama kafanıza takılan sorular işin uzmanları tarafından görüntülü olarak cevaplandırılıyor. IPTV nedir, LCD ile Plazma arasındaki fark, fotoğraf makinesinde filtre ne işe yarar, gibi.

UzmanTV: işleyişi, bir yukarıda anlattığımız sitenin aynısı. Hatta daha kallavisi. Daha profesyoneli. Tıklayınız.

uzmantv

Türkçe Siteler böyleydi, Birkaç tane de yanabcı kaynğımız var:

VideoJug: yukarıda bahsettiğimiz son iki sitenin internasyonel hali ve onların esin kaynağı. İngilizce yayın yapıyor.

videojug

Video-Tutes: flash, 3dmax, illustrator gibi tasarım programlarına dayalı online video dersleri sitesi. Tıklayınız.

Bunların dışında benzer görev gören ingilizce siteler de şunlar: tutorialVid, sutree, video-animation

Birkaç ay önce de şöyle bir bildirim olmuş konuyla alakalı:

okuyarak değil animasyonla öğren

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

öğrenilmesi gereken 15 css hilesi

CodeMachine — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

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

a'dan z'ye internet sitesi kurulumu

CodeMachine — Sat, 24 Jan 2009 10:37:00 GMT

adan zye internet sitesi yapımı

Öncelikle en baştan başlayalım:

Bir internet sitesi oluşturmak için ilk olarak bu siteye ulaşılmasını sağlayacak bir alan adına(domain) ve sitenizin dosyalarını barındırabileceğiniz bir web alanına(hosting) sahip olmanız gerekiyor.

alan adı

1-Alan adı(domain) ne demek?
alan adı sizin internetteki adresinizdir. örneğin bildirgec.org gibi. kurduğunuz bir websitesine ulaşılması için alan adı mutlaka gereklidir. alan adınız sitenizin internetteki kimliği olacaktır.

2-alan adı nasıl alınır?
alan adları yıllık periyotlarla kiralanarak kullanılır. nasıl alan adı alınacağına ve yönetileceğine dair şuradan bilgi edinebilirsiniz.

3-Web Alanı nedir?
web alanı sitenizi internet üzerinde yayına açmak için sitenizin dosyalarını yükleyeceğiniz alandır. bu alanda uzmanlaşmış firmalar tarafından yine aylık veya yıllık olarak kiralanan bu alana dosyalarınızı yükler ve erişime açarsınız.

4-hosting nedir?
hosting web sitenizi koyacağınız web alanının

hosting

sağlanması hizmetidir. bunun için iyi özellikte ve çok hızlı internet bağlantısı ve altyapısına sahip bilgisayarlar gerekir. bu bilgisayarlara sunucu denir. özel olarak bu sunucuların konulduğu ve bakımının yapıldığı yerlere datacenter denir.

5-hosting hizmeti nasıl alınır, nelere dikkat edilmeli?
hosting hizmeti bu alanda uzmanlaşmış birçok firma tarafından verilmektedir. bu firmaların detaylı listesi için buraya bakabilirsiniz.

hosting alırken dikkat edilecek hususlar:

vergi levhası
güvenilir bir hosting sitesinin vergi levhası ve vergi kaydı olmalıdır. bu bilgiye sitedeki hakkımızda veya künye bölümlerinden ulaşabilirsiniz. eğer bir vergi levhası yoksa bu firmanın vergi kaydı yoktur ve alacağınız hizmetin garantisi yoktur.

açık adres ve telefon numarası
güvenilir bir hosting firmasının sitesinde açık adresi ve mesai saatleri içerisinde ulaşabileceğiniz telefon numarası bulunmalıdır. bu hem firmanın güvenilirliği hem de satış sonrası destek için önemli bir noktadır.

yorumlar ve referanslar
hosting hizmeti satın alacağınız site hakkında biraz araştırma yaptıktan sonra karar vermeniz en sağlıklısı olacaktır. daha önce bu firmadan hizmet almış kişilerle konuşmanız firmanın beklentilerinizi karşılayıp karşılayamayacağı hakkında fikir edinmenizi sağlar. ayrıca firmanın sitesinde varsa referanslara bakmanız da firmanın sunduğu hizmetin kalitesi hakkında fikir verir. sayfaların hızına ve o firmada barındırılan websitelerinin kalitesine bakarak daha iyi karar verebilirsiniz. unutmayın kaliteli bir websitesi kaliteli bir hosting firması ile çalışır. bu nedenle referansların içindeki sitelerin alanlarında ne kadar uzman olduklarını değerlendirin.

hizmet sözleşmesi
firmanın hizmet sözleşmesini dikkatlice okuyun. sitesinde yer verilen özelliklerin ve hizmetlerin sözleşmede yer alıp almadığını kontrol edin.

teknik destek
hizmet alacağınız firmanın teknik desteği de seçiminizde önemli bir kriter olmalıdır. e-mail ve telefonla teknik desteklerini test edin. firmaya, hizmetleri ve teknik destekleri ile ilgili ayrıntılı sorular barındıran uzunca bir mail gönderin. size ne kadar zamanda cevap verildiğine ve gelen mailin sorularınızın hepsine cevap verip vermediğine ve özenilerek mi yoksa baştan savma mı yazıldığına, imla kurallarına uygun olup olmadığına dikkat edin.

para iadesi veya deneme süresi
hizmetten memnun kalmadığınız takdirde paranızı geri alabilmeniz için para iadesi garantisi veren firmalardan alışveriş yapın. veya ödeme yapmadan bir süre deneme imkanı tanıyan firmaları tercih edin.

6-unix hosting mi windows hosting mi?
unix hosting veya windows hosting olarak iki çeşit hosting hizmeti alabilirsiniz.

Unix Hosting: eğer siteniz php tabanlı olacak ve mysql veritabanı kullanacaksa unix hosting tercih etmelisiniz.

windows hosting: sitenizde asp, asp.net gibi sistemler ve veritabanı olarak access, mssql gibi sistemler kullanacaksanız windows hostingi tercih etmelisiniz.

Şimdi sitemizin kurulumuna geçebiliriz. bir websitesi kurmak için html, php, asp gibi programlama dillerinden en az birine hakim olmanız gerekir.

7- Programlama dili bilmiyorsam web sitem olmayacak mı?

programlama dili bilmeden websitesi kurmanızı sağlayan birçok hazır içerik yönetim sistemi(cms) var. örnek olarak: joomla, wordpress, php nuke, drupal vs. ama bunları da kullanmak için ortalama seviyede bir bilgiye ihtiyacınız olacak.

8- php tabanlı bir içerik yönetim sistemi(cms) kullanarak bir web sitesi oluşturmak

Öncelikle istediğimiz özellikteki site için en uygun sistemi seçmeliyiz.
şu anda en popüler içerik yönetim sistemlerinden bazıları:

Blog için: wordpress
portal için: joomla, phpnuke, drupal, mkportal
forum için: phpbb, smf, vbulletin, ipb

hazır sistemlerden hangisi amacımıza uygunsa resmi sitesinden veya destek sitelerinden bilgisayarımıza indiriyoruz. içerik yönetim sistemlerini seçerken sitelerinin sunduğu desteği de göz önünde bulundurmalısınız. çünkü bir sorun olduğunda soracak birilerinin olması hem sitenizin yayın hayatına devamı hem de sizin öğrenmeniz açısından çok önemlidir. bu yüzden popüler olan sistemleri kullanmayı tercih edin.

*indirdiğiniz sistem muhtemelen rar uzantısında olacaktır. onu kullanabilmek için öncelikle klasör haline getirmelisiniz. bu klasörü de ftp programları aracılığıyla sunucunuza göndermeniz gerekli.

Kullanabileceğiniz programlardan bazıları: filezilla, cuteftp, flash fxp

bu programlardan herhangi birini edinip çalıştırıyoruz.daha sonra hostumuza bağlanmak için hostumuzun bize verdiği şu bilgileri kullanacağız:

ftp adresi: ftp.domain.com gibi
kullanıcı adı: kullanıcı adınız
şifre: şifreniz
port:21

gerekli bilgileri girerek ftpmize bağlanıyoruz. daha sonra ftpmizde hostumuzun daha önce bize bildirmiş olduğu dizine(genelde /www ya da /public_html olur) içerik yönetim sistemimizi sürükleyip bırakıyoruz.

Dosya aktarımı tamamlandıktan sonra bir veritabanı oluşturmamız gerekiyor. bunun için ise sitemizin kontrol paneline girmeliyiz. çok farklı çeşitlerde kontrol paneli mevcut fakat en çok kullanılanı cpanel ve ben cpanele göre anlatacağım:

cpanel'e girdikten sonra mysql veritabanı sihirbazının verdiği yönergeleri takip ederek veritabanı ve veritabanı kullanıcı adımızı oluşturuyoruz.

buraya kadar bir websitesi oluşturmak için en temel bilgileri anlatmış olduk. Buradan sonra her içerik yönetim sisteminin kendine özgü bir kurulum yöntemi var. Bunları da şuralardan öğrenebilirsiniz:

joomla kurulumu
phpbb kurulumu
wordpress kurulumu
smf kurulumu

başlangıçta bütün bu bilgileri kavramak belki zor gelecektir, fakat yılmayın, biraz araştırmadan sonra hepsi çorap söküğü gibi gelecektir.
kolay gelsin...

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