bildirgec.org - gorkemtezcanli - beğendikleri

Web Profesyonellerine Zaman Kazandıracak 50 Araç

gorkemtezcanli — Tue, 29 Jun 2010 09:33:00 GMT

Eğer bir web tasarımcıysanız zamanınız çok değerlidir. Sizlere zaman kazandırabilecek çok çeşitli araçları tanımak isteyeceğinizi düşünüyorum. Web tasarımcılar için 50 zaman kazandıran araç sizlerle..

1. Bounce
En büyük sorunlardan bir tanesi tasarım öğelerini müşterilerine anlatmaktır. Çoğumuz bunun için çeşitli grafik editörlerine tasarımın ekran görüntülerini atarak üzerine açıklamalar yazarız. Bounce tasarımlarda sayfaları bölümleyip, yorum ve metin yazabilmemizi sağlıyor. Ayrıca sayfayı ziyaret edenler de geri dönüşlerini buradan paylaşabiliyor.

Bounce App

2. HammingBird
Web sitesi üzerinde ziyaretçilerin davranışlarını eş zamanlı olarak detaylı bir şekilde sunan bu araç sisteme yüklenen küçük bir node.js dosyasıyla çalışıyor.

3. TitanPad
Google Docs benzeri bir sisteme sahip olan TitanPad dökümanları birden fazla kullanıcıya eş zamanlı düzenleme imkanı sunuyor. Ayrıca farklı kullanıcıların yaptıkları değişiklikler farklı renkler de gösteriliyor.

4. 0to255
Renklerle ilgili harika bir araç olan 0to255 kodunu girdiğimiz ya da siteden seçtiğimiz bir rengin açılan versiyonlarını ve renk kodlarını bize sunuyor. Renk seçimlerimizde oldukça yardımcı olacağına kuşku yok.

5. Online Dummy Image Generator
Boş bırakmak istediğimiz grafik öğeleri yerine koyabileceğimiz "dummy" grafikler üreten bir araç. Boyut, arkaplan rengi, grafik formatı gibi değişkenleri bulunan sistem gerçekten çok kullanışlı.

6. Tableizer
Tablo kodlamak yine en sevmediğimiz detaylardan bir tanesi. Özellikle excel vb. dökümanlardan gelen yoğun tabloları çevirmek oldukça zaman alıcı olabiliyor. Tableizer, bizim için bu tabloları HTML formatına çeviriyor.

7. Divine - PSD to HTML
Tamamen ücretsiz olan PhotoShop eklentisi PSD formatında tasarladığımız yapıları Wordpress'e kolaylıkla çevirebilmemizi sağlıyor.

8. SketchPad
Oldukça geniş özellikli bir online grafik editörü. PhotoShop benzeri görsel bir yapıda olan bu araç zor zamanlarımızda çok işimize yarayabilir.

9. Producteev
Önemli e-postalarınızı task@producteev.com'a yönlendirin. O sizin için işleri bir yapılacaklar listesi haline getirsin.

Bu yazı şu kaynaktan çevirilmiştir. Diğer araçlar için yazının kaynağını inceleyebilirsiniz.

Takip Et: ekuplu bildirgeç profili - FriendFeed

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

2010 web tasarım eğilimleri

gorkemtezcanli — Fri, 22 Jan 2010 07:46:00 GMT

yeni bir on yıl içine girerken, 2010 yılında eğlenceli ve deneysel çalışmalarla dolu web tasarım eğilimlerini tahmin edebiliriz. etkileyici tasarımlar oluşturmak için html5 ve css3'ün yeni özelliklerinden yararlanmaya çalışıyoruz. serif yazı tipi ve dokulu arka plan popüler olacak. css3 sayesinde, köşeleri yuvarlatılmış menüler, akıllı telefonların yükselişiyle, mobil web tasarımı 2010 yılına damga vuracak gibi görünüyor.

1- serif fonts
son on yılda, çoğu web sitesi verdana veya arial font içinde tasarlanmış, ancak bu yeni on yılda değişecek. web tasarımda serif yazı tipleri daha fazla yer alacak.
daha detaylı bilgi için bu makaleyi okuyabilirsiniz.
örnekler;

2- büyük başlıklar
başlığında büyük font kullanan (tasarımın parçası arayüz olarak) web siteleri popüleritesini artıracaktır.
örnekler;

3- özel font kullanımı
typekit gibi kaliteli ve karakteristlik font kullanan sitelerden (fontsquirrel, opentype ve moveabletype) temin edebileceğiniz özel fontların 2010 yılında daha fazla kullanılacağını tahmin ediyoruz.
örnekler;

4- dokulu arka plan
arka planda büyük font kullanımı tarihe karışacak yavaş yavaş yerini dokulu yüzeylere bırakacak.
örnekler;

5- minimalist ve taralı tasarımlar
minimalist ve ızgara görünümlü (taralı) tasarımlar yeni değildir. son yıllarda kullanılmaya başlanmış ve 2010 yılında popüleritesini artıracağını düşünüyoruz. bonus ++ (seçkin minimal web tasarımlar)
örnekler;

6- CSS3`ün getirdiği yeni özellikler
css3 tüm tarayıcılar tarafından henüz desteklenmemesine rağmen, tasarımcıları bir çok yeni özelliği ile üzerine çekiyor. yuvarlak köşeler, animasyonlar, çoklu arka planlar... aşağıdaki sitelerin css3 ile muhteşem dönüşünü göreceksiniz.
örnekler;

-css animasyon
aşağıdaki örnekte halka ekseninde hareket eden topların (nötronların) css3 ile kullanımını göreceksiniz.

- yuvarlak çerçeveler ve gölgeli kutucuklar
yuvarlak çerçeveler ve gölgeli kutucuklar en çok kullanılan css3 özelliklerindendir. bu özellikler 2010'da da kullanılmaya devam edilecektir diye düşünüyoruz.
örnekler;

- gölgeli metinler
tasarımcılar birçok metin daha derin göstermek için metinlerde gölge kullanıyorlar.
örnekler;

- rbga ve matlık
rgba kolay arka plan ve saydamlık ayarını yapar. tasarımcılar bu özellikten dolayı tasarımlarında daha fazla rbga kullanacaklarını düşübüyoruz.
örnekler;

7 - Mobil tasarım
iphone'un 2007'da satışa sunulduğundan beri, herkes cep tasarımı hakkında konuşuyor. artık daha akıllı telefonlar tarafından desteklen css ve javascript mobil tasarımda olmazsa olmazlardan olacak. sayısız site mobil sürümlerini kullanıcılarına sunmaya başladı bile.
örnekler;

daha fazla örnek web tasarımı için webdesignerwall adresini ziyaret edebilirsiniz

Bu yazı gorkemtezcanli 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ılara özel e-dergiler

gorkemtezcanli — Tue, 19 Jan 2010 12:43:00 GMT

internet'in gelişimine ayak uyduran online yayıncılık sektörü, ihtiyaca yönelik içeriği e-dergiler aracılığıyla geniş kitlelere sunmaya devam ediyor. ücretsiz sunulan e-dergiler artık flaş ve sayfa çevirme eklentileriyle daha kaliteli ve görsel açıdan daha etkililer. bilgisayar ekranlarının dokunmatik yapıya bürünmesi sayesinde artık, e-dergiler kullanım açısından daha ileri düzey olanaklar da sağlayabiliyor.

Visualizer Magazine

tanıtım sayısını yeni yılda sunan visualizer magazinede illüstratör yiğit köroğlu'nu, fotoğraf sanatçısı mehmet yalhı'yı ve 76 tasarımcının portfolyosunu bulabilirsiniz. dergiyi "pdf" ve "exe" olarak indirebilirsiniz.

Embrosyst

beş sayıyı geride bırakan Embrosyst'in "collage" temalı sayısında türk fotoğrafçı murat saygıner'in çalışmalarını da görebilirsiniz. indir.

Modern Design Magazine

spotbit.com'un e-dergicilik alt yapısını kullanan Modern Design Magazine'de, mimari ve endüstriyel çalışmalar yer alıyor. indir.

Root

sayfalarında durağan görsellerin yanısıra hareketli (animasyon) çalışmalara da yer veren root dergisini http://www.rootmagazine.org/ adresinden indirebilirsiniz.

Viziomag

ispanyolca çıkan viziomag görsel sanatların her türüne yer veren bir dergi. indir.

WOW

sekizinci sayısını sunmaya hazırlanan WOW endonezya'dan çıkan bir e-dergi. derginin içeriğini showcase, local hero, guest artist gibi bölümler oluşturuyor indir.

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

Photoshop ile web tasarım dersleri

gorkemtezcanli — Thu, 21 Jan 2010 16:01:00 GMT

Web tasarımında photoshop önemlidir.html ve css kodlarından farklı olarak görselliği bize sunar.Aşağıdaki farklı sayfa tasarımlarını ile ilham kaynağınızı geliştirebilir veya photoshop ile web sayfası hazırlarken nelere dikkat etmeniz gerektiğini daha iyi kavrayabilirsiniz. Web sitenizin türüne göre birçok sayfa tasarım örneği bulunmakta.İşte pohotoshop ile web tasarım dersleri;

Graphic Design Studio
(Grafik Tasarım Stüdyosu oluşturma)

Create an awesome software layout
(Yazılım düzeni oluşturun)

Sleek portfolio layout
(Şık Portföy düzeni)

Create a dark horror portfolio layout
(Karanlık, korku portföy düzeni oluşturma )

Create a business wordpress template
(Wordpress business tema oluşturma)

Create an awesome dark hosting layout
(Sunucu sayfası oluşturma)

Create an e-commerce web layout
(e-ticaret sayfası oluşturma)

Create a clean web 2.0 business layout with photoshop
(Temiz web 2.0 business sayfası oluşturma)

Create a photoshop template for drupal or wordpress
(Photoshop ile Drupal veya Wordpress Teması oluşturma)

Create a grunge web design
(Grunge web tasarımı oluşturma)

Create a grunge website layout in photoshop
(Photoshop ile Grunge website düzeni oluşturun)

Create a vibrant modern blog design
(Canlı blog tasarımı oluşturun)

Ayrıca Bakınız ;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak ; gfxtoolkit

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

Birbirinden Farklı yaratıcı jquery uygulamarı

gorkemtezcanli — Wed, 20 Jan 2010 10:24:00 GMT

jQuery inanılmaz geniş bir kütüphane. Hayal gücünüze ve ihtiyacınıza göre istediğiniz şekilde kullabilirsiniz. Klasik kalıpları dışına çıkarak yaratıcı çalışmalarınızı ziyaretçilerinize sunabilirsiniz. Farklı tasarımlar her zaman için ilgi çeker. Bu yüzden aşağıdaki farklı jQuery tasarımlarını isterseniz kullabilir veya kendinizi geliştirip daha farklı çalışmalar yapmak için kullanabilirsiniz;

Feature List

Bu jQuery uygulaması sayesinde projelerinizi gösterebilir ya da web sayfanızdaki popüler veya yeni makale ve haberleri yayınlayabilirsiniz. Birçok sitede aynı mantık ile yapılmış birçok jQuery veya flash uygulamalar görmek mümkün.

Drag to Share like Mashable using jQuery

Mashable'da bulunan resimleri paylaşma özelliği diğerlerinden farklı. Resmi tıklayarak paylaşmak istediğiniz sosyal medya sistesinin üstüne götürüyorsunuz.jQuery ile yapılan çok hoş bir uygulama.

youtubeplaylist

youtubeplaylist, sayesinde playlist'inizi birkaç saniyede sayfada göstermeniz mümkün. Videoların sadece başlangıç resimleri ekranda yer alırken tıkladığınız anda video youtube üzerinden oynatılmaya başlar.

jQuery maxImage plugin

Bu jQuery uygulaması sayesinde sitenizin istediğiniz herhangi kısmının arka planını css kodları ile uğraşmadan anında değiştirmeniz mümkün.

Hwy jQuery ListMenu Plugin

Çok kullanışlı jQuery menü uygulaması. Sözlükler veya arşivler için ideal bir jquery uygulaması.

Making A Slick Content Slider

jquery ile yapılan bu Slider ile web sitenizde ürünlerinizi daha iyi gösterebilirsiniz. Ziyaretçilerinize sayfalar dolaştırmadan hoş bir görünüm ile ürünlerinizi tanımış olurlar. Farklı amaçlar ile de kullanmak mümkün.

jVal

jVal, çok kullanışlı jQuery form uygulamasıdır. Belirlediğiniz kriterler formda uygulanmazsa ziyaretçiyi uyarır. Örneğin sayı yerine kelime girildiyse, şifre uzunlu gibi.

jQuery Highlighter

Dışarıdan gördüğünzde flash sanabileceğiniz muhteşem bir jQuery uygulaması. Web sitenizi yada ürünleriniz tanıtabilir. Herhangi bir uygulamayı daha iyi öğretebilirsiniz.

jTimepicker

jTimepicker, formlar için yardımcı bir jQuery uygulamasıdır. Ziyaretçilerinizin herhangi bir tarihi uğraşmadan forma girmesini sağlar.

Spellify

Google'da bulunan tamamlama özelliğinin biraz daha geliştirilmiş versiyonu. Çok kullanışlı bir jQuery uygulaması.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynaklar ; blogfreakz , jqueryglobe , ajaxrain

Bu yazı gorkemtezcanli 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 3 öğrenmek için en iyi dersler

gorkemtezcanli — Sat, 16 Jan 2010 11:17:00 GMT

CSS 3 çalışmaları henüz tamamlanmadı fakat birçok tarayıcı css3'ü kısmen kullanıyor. Bu yüzden web tasarımcıları css 3'e son günlerden yüklenmiş durumdalar. web 2.0 ile css3 inanılmaz görsel tasarımları oluşturmak için muhteşem bir ikili. css 3 yeni olduğu için bilmeyen tasarımcılar için birçok yararlı dersler bulunmakta. işte css 3 öğrenmek için yararlı dersler;

Introduction to CSS3 – Part 1: What Is It?
(CSS 3'e giriş - bölüm 1 : nedir?)

Get Started with CSS
(CSS 3'e başlayın)

The fundamental problems with CSS3
(CSS 3 Hakkında Temel Sorular)

CSS 3 Cheat Sheet

CSS 3'teki yeni nesneleri tablo halinde veren gerekli bir döküman

Rounded Corner Boxes the CSS3 Way
(CSS3 ile köşesiz kutular yapmak)

11 Classic CSS Techniques Made Simple with CSS3
(CSS3'ün 11 Klasik tekniği)

3 Easy and Fast CSS Techniques for Faux Image Cropping
(Resim kırpmak için 3 kolay CSS tekniği)

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
(HTML 5 ve CSS 3 : Teknikleri Yakında Kullanılacak)

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
(CSS 3 ile nasıl seksi Sliding Panel yapılır ?)

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynak ; aext

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

Projeleriniz İçin Her Zaman İhtiyaç Duyabileceğiniz 4800 Mini İkon

gorkemtezcanli — Fri, 15 Jan 2010 15:56:00 GMT

Mini ikonlar kullanışlı olduğu için çok sık tercih edilir. Website, blog ve uygulama arayüzleri için her zaman kullanabilirsiniz. Aşağıda sonraki projelerinizde kullanmak için 4800'den fazla mini ikon yer almaktadır.

1. FAMFAMFAM'dan 144 mini ikon

2. FAMFAMFAM'dan 247 bayrak ikonu

3. Sublick Interactive'den 35 sevimli ikon

4. PixelPress'den açı ikonları

5. Pinvoke'den 2529 mini ikon

6. Pinvoke'den 400 piksel ikon

7. Komodo Media'dan 30 sosyal medya mini ikonu

8. Nclud'dan 26 minimalist piksel ikon

9. Icojoy'dan 75 piksel ikon

10. Random Jabber'dan 55 ikon

11. Splashy Fish'den 482 ücretsiz ikon

12. IconDock'dan 320 mini piksel ikon

13. Paul Armstrong Designs'dan 77 Web Tasarım ikonu

14. Paul Armstrong Designs'dan 260 Siyah ve Beyaz piksel ikonu

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

40 yüksek kaliteli simge seti

Sevimli Hayvanlar Simge Seti

En İyi Sosyal Medya Simgeleri

40+ Şık ve Son Moda Simge Seti

30 Yüksek Çözünürlüklü Güzel ve Ücretsiz Simge Seti

Web Tasarımı ve Geliştiricileri İçin 22 Güzel Simge Seti

Masaüstü ve Web İçin 45 Kusursuz Yeni Simge Paketi

Psd Formatı İle 30+ Kullanışlı Simge Seti

kaynak: 10steps.sg

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

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

.htaccess dosyası ve özellikleri

gorkemtezcanli — Sun, 13 Jul 2008 06:07:00 GMT

htaccess nedir?
htaccess dosyası (hypertext access file), klasör(ler) düzeyinde Apache'nin ayarlanmasına izin veren, http sunucusu genel ayar dosyasını (httpd.conf) özelleştirebilen dosyadır. Dosya ".htaccess" olarak geçmektedir.

htaccess ne işe yarar?

Sitenizin kaynaklarını tüketen, sitenizden veri çeken linkler (hotlinking) engellenebilir,
Sitenizi ziyaret eden zararlı botlar engellenebilir,
Site üzerinde gizli klasörler oluşturulabilir,
Klasörlere erişim engellenebilir,
URL'deki bağlantı adresleri biçimlendirilebilir. Örnek olarak "makale.php" "makale.html" olarak, "makale.php?id=5" "makale-kuresel-isinma-id-5" gibi düzenleme yapılabilir veya bildirgec.org'daki gibi bildirgec.org/etiket/htaccess bildirgec.org/yazi/htaccess-dosyasi gibi görünüm sağlanabilir,
Veri sıkıştırma için kullanılabilir,
Dosya veya klasörlere şifre eklenebilir,
Hata sayfalarını özelleştirilebilir,
Klasörleri listelemede kullanılabilir,
Yönlendirmelerde kullanılabilir,
Hangi dilin kullandığı saklanabilir,
Site için otomatik alt alan adları(subdomainler) oluşturulabilir.

htaccess dosyası site için çok önemli bir dosyadır. Bu dosya ile arama motoru optimizasyonu, bant genişliğinin optimum kullanılması, güvenlik önlemleri, erişim ayarları ve daha birçok ayar yapılabilmektedir. Her dosyanın çağrılışında .htaccess dosyası incelenir. Bu nedenle htaccess dosyasını küçük tutmada fayda vardır. .htaccess dosyasının kuralları, üst dizinlerdeki htaccess kurallarını, o dizin için değiştirebilir.

bazı örnekler:

Alan adınızı www'li kullanmaya zorlama:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^bildirgec\.org
RewriteRule (.*) http://www.bildirgec.org/$1 [R=301,L]

Kötü botların engellenmesi:
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]
RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com [OR]
RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]
RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]
RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]
RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]
RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]
RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^Express\ WebPictures [OR]
RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]
RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]
RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]
RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]
RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]
RewriteCond %{HTTP_USER_AGENT} HTTrack [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Stripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} Indy\ Library [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]
RewriteCond %{HTTP_USER_AGENT} ^Internet\ Ninja [OR]
RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]
RewriteCond %{HTTP_USER_AGENT} ^JOC\ Web\ Spider [OR]
RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]
RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mass\ Downloader [OR]
RewriteCond %{HTTP_USER_AGENT} ^MIDown\ tool [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mister\ PiX [OR]
RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]
RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Net\ Vampire [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Explorer [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Navigator [OR]
RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^Papa\ Foto [OR]
RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]
RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]
RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]
RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]
RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport\ Pro [OR]
RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Image\ Collector [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebGo\ IS [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ eXtractor [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ Quester [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]
RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Xaldon\ WebSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Zeus
RewriteRule .* - [F]

Özel HTTP 404 hata sayfası oluşturma:
ErrorDocument 404 /errors/notfound.html

Hotlinking'i önlemek:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?bildirgec.org/.*$ [NC]
RewriteRule .(gif|jpg)$ - [F]

Güzel görünümlü URL'ler Oluşturma:
(bildirgec.org/htaccess/ için bildirgec.org/yazi.php?name=htaccess)
RewriteRule ^([A-Za-z0-9-]+)/?$ yazi.php?name=$1 [L]

İlgili yazılar: 1 2 3

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

BluePrint CSS Framework'ünü Kullanmak

gorkemtezcanli — Tue, 30 Dec 2008 06:46:00 GMT

Türkçe'ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE'yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm...

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

Bu slogan blueprintcss.org websitesinde yer alıyor ve Blueprint CSS iskeletini net bir şekilde özetliyor aslında. Blueprint, projelerinizi üzerine inşa edebileceğiniz muhteşem bir temel sunuyor ve bunu herkesin beğeneceği bazı standart stil şablonlarını, tipografi elementlerini, ızgara iskeletini, güzel görünümlü formları ve yazdırma stil şablonunu tüm popüler tarayıcılara uyguluyor. Gelin hep birlikte BluePrint'in bunu nasıl başardığına bakalım.

BluePrint Kaynak Dosyaları

reset.css Bu dosya tüm tarayıcıların varsayılan HTML element tanımlamalarını sıfırlar. Eminim hepiniz bir projeye başlamadan önce <body> elementine 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;' ya da bunun gibi stil elementlerini dahil ediyorsunuzdur. İşte reset.css'nin da yaptığı iş bu ve çok daha fazlası: Boşluklar, tablolar, yazıtipleri vb elementlerin css değerlerini sıfırlıyor ve size projenize başlamanız için temiz bir ortam sunuyor.
typography.css Bu dosya bazı varsayılan tipografi değerlerini tanımlıyor. Tüm stilleri burada açıklamayacağım ancak bu dosyanın BluePrint CSS iskeletinin en sevdiğim parçası olduğunu belirtmek isterim. Tahmin edersiniz ki projenizi bitirdikten sonra sayfanın bir köşesinden fırlayan 'Times New Roman' stilinde bir yazıya rastlamak hiç hoş olmayacaktır. BluePrint'in typography.css dosyası işte bunun önüne geçiyor ve yazıtipi boyutları, tablolar, satır aralıkları gibi elementler için stil kurallarını belirliyor.
grid.css bu dosya blueprint'in ızgara (grid) şablon kurallarından sorumlu. Bunu kullanan sınıflara (class) birazdan değineceğim. Izgara ile ilgill değinmem gereken önemli bir nokta blueprint'in varsayılan olarak 950px genişliğe sahip, her biri 30px genişliğinde ve aralarında 10px boşluk bulunan 24 sütun kullanıyor oluşu. Bu size biraz fazla katı gelebilir ancak BluePrint Izgara CSS Oluşturucusu'nu kullanarak her zaman kendi ızgara modellerinizi oluşturabilirsiniz. Eğer bu paragraf kafanızı karıştırdıysa panik yapmayın, yazımın devamında ızgara şablonu kullanarak site taslağımızı oluşturacağız. Ancak eğer CSS ızgara modellerine aşina değilseniz, Raj'ın Web Tasarımı İçin Hangi CSS Izgara İskeleti'ni Kullanmalıyım? makalesi sizin için iyi bir başlangıç olabilir.
ie.css BluePrint IE'yi destekliyor, işte bu sebeple IE'yi özel kılan o küçük detayları adresleyen kendi özel CSS dosyasına sahip :) İşin güzel yanı, BluePrint bunu sizler için hallediyor ve bu sebeple, iskeletin tüm ana elementleri tüm ana tarayıcılarda (IE 5 bile dahil) kullanılabiliyor.
print.css Bu dosya bazı varsayılan yazdırma stillerini tanımlıyor. Bu sayede ziyaretçileriniz web sitenizin yazıcıdan çıktısını aldığında normalden daha iyi görünmesini sağlıyor. print.css dosyasının bir diğer güzel özelliği de web sitenizin alan adını girebileceğiniz özel bir bölümü içeriyor olması. Bu sayede site içeriğinizde eğer herhangi bir bağlantı bulunuyorsa, yazıcı çıktısı alındığında o adres, bağlantı metninin hemen yanında parantez içerisinde görüntülenecektir. Bu alanı doldurmazsanız sadece harici sitelere olan bağlantılarınız doğru şekilde görüntülenecektir. daha detaylı bilgi için print.css dosyasının son kısmını inceleyin.
forms.css Bu dosya ise güzel görünümlü formlar ile uyarı mesajlarının kullanılabilmesini sağlıyor. Eğer Rails kullanıyorsanız flash uyarılarını bile görüntüleyebilirsiniz. Bu dosya, yazımın devamında değinmeyeceğim tek dosya olduğundan, aşağıdaki resim size bazı varsayılan form stilleri kullanılarak oluşturulmuş bir form örneğini gösteriyor.

BluePrint CSS form

bu altı farklı stilşablonunu eklemek zorunda mıyım?
Hayır. BluePrint CSS, HTML sayfalarınız için sıkıştırılmış üç adet CSS stilşablonunu içeriyor. screen.css yukarıdaki 1., 2., 3. ve 6. stil şablonlarını içeriyor. Bunun yanısıra print.css ve ie.css bulunuyor. İşin güzel yanı, blueprint css iskeletinin modüler yapısı sayesinde her bir css dosyasının birbirinden bağımsız işleyebiliyor oluşu. Bu sayede BluePrint'in sunduğu şablonlardan sadece istediğiniz şablonu kullanabilirsiniz. Örneğin BluePrint CSS Izgara modelini kullanmak istemiyor olabilir, ancak typography.css ve reset.css'nin nimetlerinden faydalanmak istiyor olabilirsiniz. Diğer bir deyişle diğer CSS elementlerinin işlemesi için BluePrint ızgara modelini kullanmak zorunda değilsiniz.

BluePrint kullanarak şablon oluşturalım

BluePrint CSS Şablonu

Yazımızın devamında, hobi amaçlı hikaye yazan kullanıcıların hikayelerini paylaşabileceği ve diğer kullanıcıların da hikayelere yorumlarını ekleyebileceği bir site oluşturcağız.

Aranızda eminim sıkı tasarımcılar bulunuyordur ve yukarıdaki resme baktığınızda bu ne biçim tasarım diyenleriniz olacaktır. Ancak burada ilginç olan şey, benim yukarıdaki tasarımı oluşturmak için tek satır CSS kodu yazmamış oluşum. Yukarıdaki tasarım varsayılan BluPrint CSS stil tanımlamalarını kullanıyor ve tasarım açısından türünün en iyi örneği değil elbette. Ancak yukarıda da bahsettiğim gibi yukarıdaki görünüme ulaşmak için tek bir satır kod yazmadım ve ayrıca hazırladığım bu şablon benim projem için güzel görünümlü ve kolayca değiştirilebilir olması açısından önemli. Tasarımım muhtemelen ilerleyen dönemlerde değişeceğinden, BluePrint benim bu değişiklikleri kolayca uygulayabilmemi sağlıyor.

Parçalara Ayıralım
Belgenin başlık (<head>) kısmı
Bildirgec kod örneklerini görüntülemede verimli bir ortam sunmadığından makalede yer alan kodları harici bir txt dosyası olarak yayımlamayı uygun gördüm. Yukarıdaki bağlantıya tıklayarak koda ulaşabilirsiniz.

İlgili kod örneği, tipik bir <head> etiketinin Blueprint kullanıldığında nasıl görüneceğine iyi bir örnek teşkil ediyor. İskeletin CSS dosyalarını dahil ederek işe başlamanız gerekiyor (bu dosyalar screen.css, print.css ve ie.css'den oluşuyor).

BluePrint ile ilgili en iyi şeylerden biri de salt CSS'den oluşması, bu sayede de tıpkı diğer tüm CSSlerde olduğu gibi modifiye edilebilir. İşte BluePrint eklentileri de bu şekilde çalışıyor. Örneğimde BluePrint fancy-type eklentisini kullandım. İlgill eklenti bazı güzel görünümlü tipografi öğelerini barındırıyor. Kod örneğinde de göreceğiniz üzere ilgili eklenti dosyasını blueprint css iskelet dosyalarını dahil ettikten sonra sayfama dahil ettim, bu sayede ilgili eklenti, blueprint css değerlerinin üzerine yazarak kendi değerlerini aktif hale getirebiliyor. Buraya kadar bazı BP eklentileri mevcut. İlgili eklentiler basitçe bazı öntanımlı BluePrint elementlerinin üzerine yazarak kendi değerlerini CSS iskeletine entegre ediyor.

Sayfa Başlığı

BluePrint Sayfa Başlığı

Kod Örneği İçin Buraya Tıklayınız
Bu kod ile ilgili en önemli nokta, ızgaranın 'container' sınıfına (class) dahil bir <div> ile çevrelenmesi gerekiyor oluşu. Eğer bunu uygulamazsanız içeriğiniz ızgaraya dahilinde görüntülenmez. <hr /> etiketleri BluePrint tarafından sayfanın bölümlerini dikey olarak ayırmak için kullanılıyor. 'alt' sınıfı ise fancy-type eklentisi tarafından kullanılıyor ve herhangi bir metin elementinin daha farklı görüntülenmesi için kullanılıyor.

Ana İçerik

BluePrint Ana İçerik

Kod örneği için buraya tıklayınız.

Bu kod örneğinde pek çok önemli detay bulunuyor. Gelin en üstteki <div class="span-17 colborder"> ile başlayalım. Bu etiket sayfa üzerindeki en geniş <div>'i simgeliyor. Bu bölüm, kod örneğinde göreceğiniz 'Featured Book' bölümünün yanısıra hemen altındaki daha küçük iki kutucuğu çevreliyor. 'span-17' sınıfı Blueprint ızgara şablonuna ait ve ilgili sınıfın kullanıldığı <div> etiketinin, sayfanın tamamındaki 24 sütunun 17'sinin genişliğinde olduğunu belirtiyor (17/24). Diğer bir sınıf 'colborder' ise column border (sütun sınırı) teriminin kısaltılmışı ve BluePrint'e, ilgili sınıfın kullanıldığı <div>'in sağına bir sınır eklemesi gerektiğini belirtiyor.

Önemli: 'colberder' sınıfı bir sütunun tamamını kullanıyor. Ana içerik kısmında 17 sütun (span-17) kullandığımızı hatırlıyorsunuzdur. Bu durumda yan çubuğun (sidebar) 7 sütun genişliğinde olduğunu düşünüyorsunuzdur (17+7=24). Ancak 'colborder' elementi bir sütunu işgal ettiğinden yan çubuk kısmının genişliği için elimizde 6 adet sütun kalmış durumda (17+1+6=24).

Yan çubuğa geçmeden önce 17 sütunluk kısım dahilinde bulunan iki kutucuğa dikkatinizi çekmek istiyorum ('Upload a book' ve 'Write a review' yazan kutucuklar). Aslında bu alan bir diğer BluePrint ızgarası içerisinde konumlandırılmış durumda. Bu dahil <div> 17 sütunluk bir <div> içerisine dahil edildiğinden, bu <>div>'in genişliği de tahmin edeceğiniz üzere 24 değil 17 sütundan oluşuyor.

Bu durumda ilk <div> 'span-8' ve 'colborder' sınıflarına dahil edilmiş. Bunun anlamı, ilk kutucuğun genişliği 8 sütundan oluşuyor ve sağ kısmında bir sınır bulunuyor. İkinci <div> ise yine 'span-8' sınıfının yanısıra 'last' sınıfına dahil edilmiş. Burası Blueprint ızgara iskeletinin önemli bir noktasına işaret ediyor. En sağdaki sütun mutlaka 'last' sınıfına dahil edilmeli. Bu sınıf, BluePrint'e, o sütunun sayfanın en sağındaki son sütun olduğunu belirtiyor ve bu sebeple onun sağına herhangi bir boşluk dahil etmemesi gerektiğini söylüyor. Son olarak iki adet kutucuğu içeren <div> için en fazla genişliğin 17 sütun olduğunu belirtmiştim. Kutucukların her birinin genişliğini 8 sütun (span-8) olarak tanımladık ve soldaki kutucuğu 'colborder' sınıfına dahil ettik. Bu durumda 17 sütunun tamamını kullanmış olduk (8+1+8=17).

Tamamdır, şimdi yan çubuğa geri dönelim. Bu yan çubuğun 'span-6' ve 'last' sınıflarına dahil edildiğini göreceksiniz. Bu yan çubuk, soldaki 17+1 sütunluk ana içerik kısmını tamamlıyor. Eğer fark etmediyseniz, 'span-#' sınıflarında # yerine 1 ila 24 arasında herhangi bir sayıyı yerleştirebilirsiniz. Daha fazla sütuna sahip bir ızgarayi tercih etmediğiniz sürece 'span-#' sınıfı herhangi bir numarayı içerebilir, yeter ki onu kapsayan (container) <div> etiketinin toplam ızgara sütun sayısından küçük olsun.

Aşağıdaki kod örneği ızgarayı örneklendirebilmek için oldukça basit bir şablonu kullanıyor. Kodu incelerseniz ızgara sisteminin nasıl çalıştığına dair bir fikriniz olacaktır.

Kod örneğine ulaşmak için tıklayınız.

Gelin bu CSS şablonunda kullandığımız diğer CSS sınıflarını inceleyelim.

'caps': Bu sınıf yan çubuk başlıkları için kullanılıyor. fancy-type eklentisi tarafından sunulan bu sınıf, tamamı büyük harflerden oluşan başlıklar oluşturabilmenizi sağlıyor.
'box': Bu sınıf özellikle listelerin görüntülenmesi için oldukça kullanışlı. Bu sınıfa dahil olan <div> etiketleri dahilindeki listelerin çevresinde bir boşluk bulunuyor ve yine ilgili kısım çevresinde bir sınır (border) bulunuyor.
'quiet': Bu CSS sınıfı, dahilindeki metnin rengini açık griye dönüştürüyor.
'prepend-top': Bu sınıf, yan çubuk dahilindeki 'Recent Reviews' bölümünde kullanılıyor. Bu sınıfa dahil olan elementin üst kısmına 1.5em'lik bir marj (margin) uyguluyor. Benzer bir sınıf olan 'append-bottom' ise aynı işlemi alt kısmına uyguluyor.
'prepend-5': Ben bu sınıfı küçük kutucuklardaki başlıkları sağa doğru itelemek için kullandım. Blueprint üzerinde aralıklar bırakmak için bir dizi sınıf bulunuyor: 'prepend', 'append', 'pull', ve 'push'. Prepend ve Append sınfları sırasıyla sola ve sağa dolgu (padding) eklemek için kullanılıyor. Pull ve Push sınıfları ise sırasıyla sola ve sağa marj (margin) eklemek için kullanılıyor. Tüm bu etiketler de ızgara modelini kullanıyor, bu sebeple ilgili sınıfın kullanıldığı <div> üzerinde kullanılabilecek en fazla sütun sayısından daha fazla bir sütun kullanmamanız gerekiyor (24 sütunluk bir ızgara modelinde 'prepend-25' sınıfını kullanmamanız gerektiği gibi).

BluePrint Footer Breakdown

Eğer CSS kutu modeli ile haşır neşir değilseniz ve padding ile margin arasındaki farkı bilmiyorsanız, hemen o konuda kısa bir ders verelim. CSS'de padding uygulanması durumunda, padding'in uygulandığı elementin sınırları dahilinde boşluk eklenir ve bu durum, ilgili elementin boyutunu arttırır. Örneğin, sınırları (border) olan bir tablo üzerinde çalışıyorsunuz ve bu tabloya padding eklemek istediniz. Bunun sonucunda tablonun sınırları tablonun kendisinden uzaklaşacaktır, zira padding elementi, tablonun sınırları dahilindeki içeriği etkiler. Öte yandan margin ise bunun tam tersidir ve boşluğu sınırların dışına etkiler ve uygulandığı elementin boyutlarını etkilemez. Bunun sonucunda margin uygulanan elementler, çevresindeki elementleri ya da elementin kendisini iteler. Aşağıdaki resim CSS kutu modelini çok net bir şekilde özetliyor.

CSS Box Model

BluePrint CSS ile hazırladığımız site

Özet
Bu rehber Blueprint CSS iskeleti sayesinde bir sonraki projenizinin ana şablonunu kolayca oluşturabilmenize nasıl katkı sağlayabileceğini ve CSS sıfırlamaları ve tipografi tanımlamaları ile sizin sırtınızdaki yükü nasıl hafifletebileceğini özetlemeye yönelik olarak hazırlandı. Ayrıca Blueprint'i Rails ile birlikte kullanıyorsanız Github üzerindeki şu kaynağı incelemenizi öneririm. İlgili kaynakta Blueprint'in Rails ile nasıl uyumlu çalışabileceğine dair pek çok örnek bulunuyor.

Blueprint'in en sevdiğim yanı sadece CSS'den oluşması. Tümüyle CSS. Eğer bu makalenin ardından Blueprint ile ilgileniyorsanız, gidin ve kaynak kodlarını inceleyin. Eğer biraz CSS bilginiz var ise sistemin nasıl çalıştığını kolayca kavrayacaksınızdır. Blueprint'in çok büyük bir kod tabanı yok, hatta pek çoğumuzun ortalama bir projede kullanacağından çok daha az CSS içeriyor. Eğer kaynak kodu okumak istiyorsanız Github üzerindeki Blueprint kaynağını inceleyebilirsinz.

Blueprint ile ilgili bilmeniz gereken birkaç kaynak:

BluePrint'in web sitesi blueprintcss.org. İskeleti indirmek için en iyi kaynak.
Varsayılan olarak Blueprint sabit şablonu kullanır. Eğer likit şablonlar ile ilgileniyorsanız, bu eklenti işinizi görecektir.
Burada da bir dizi işe yarar Blueprint eklentisi bulunuyor.

Bu yazı gorkemtezcanli 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 link depoları

gorkemtezcanli — Wed, 08 Jul 2009 17:47:00 GMT

türkçe içerikte daha çok genel konuların gönderildiği, kullanıcıların/ziyaretçilerin puan verdiği içerik toplama siteleri özellikle ingilizce içerikte daha detaylı bir halde bulunmakta. bunlardan tasarımı konu alanlar ise her tasarımcının işine yarayabilecek cinsten. işte link paylaşabileceğiniz ve tasarım üzerine kaynaklara ve yazılara ulaşabileceğiniz 12 site:

tüm yazılarım - kaynak

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