CSS Kodu Hazırlamak Artık Çok Kolay

CSS, web işleri ile uğraşan herkesin kısmen de olsa bilmesi gereken bir iştir. Blog yazarlarının bile bloglarında yapacağı yerleşimlerde, ekleyecekleri resimlerde, yazacakları yazılarda mantıken bilmeleri gereken birşeydir. Daha sonraki aşamada ise kendi tasarımlarını CSS’e aktarıp bir dizayn oluşturması vardır. Ancak bazen bu durum çok kolay olmayabiliyor. CSS’deki tüm terimlerin akılda tutulması bazen zor olabiliyor.

İşte tüm bunları göz önünde bulunduran ve neredeyse hiç bilgisi olmayan birinin bile kolayca CSS hazırlamasına imkan sağlayan Drawter artık imdada yetişiyor. Drawter yazarak değil çizerek CSS kodları hazırlamamızı sağlayan çok güzel bir servis.

Şimdi servisin kullanımından biraz bahsedeyim resimler yardımıyla.

Bizi yukarıdaki gibi üst ve sol kısımda cetveli bulunan bomboş bir sayfa karşılıyor. Burada biz istediğimiz ölçüleri çizeceğiz. Örnekte ben 500 px genişlik ve 50 px yüksekliğe sahip bir alan çizdim. Şidmi ikinci resimde bu alana div mi yoksa başlık mı veya başka bir şey mi geleceğini belirleyeceğiz.

Az önce çizdiğimiz alana “drawing options” menüsünden ne atayacağımızı seçiyoruz. Ayrıca “markup tree” yardımı ile iç içe giren divleri görebiliyoruz. Daha doğrusu kutu modelini daha basit bir şekilde görebiliyoruz.

Tüm işlemlerimiz bittikten sonra da “code” menüsünden kodumuzu oluşturuyoruz. Hepsi bu kadar. Zaten HTML yerleşim kodunu da CSS kodu ile birlikte verdiği için tekrar zamanımızı harcamaya gerek kalmıyor. Ayrıca işe başlamadan önce şuradaki videoyu da izleyerek anlatmak istediklerim hakkında daha geniş bilgiye sahip olabilirsiniz.

50 İlham Verici Sekme Tasarımı

Hazırladığımız web sayalarında kullanış olarak çok faydasını gördüğümüz bölümlerden birisi de sekmelerdir.” Tab” olarak karışımıza çıkan bu yapılar ile aynı sayfa içinde birden fazla sayfanın verebileceği bilgiyi ziyaretçilerimiz ile paylaşma imkanı buluyoruz. Ajax’ın gelişmesi ile biraz daha görsel ve işlevsel bir hal alarak sayfayı hiç değiştirmeden bile sekmelerin altı görüntülenebilir hale geldi. WordPress temalarında da yan kısımda ve içerik kısımlarında oldukça yoğun bir şekilde kullanılmaya başlandı. Ben de sekmeli tasarımlar hazırlarken ipucu vermesi anlamında 50 tane örneği bu yazıda derledim.

1-slidedeck.com

2-popscreen.com

3-delibarapp.com

4-theofficeclue.com

5-sourcebits.com

6-dishizzle.com

7-typejockeys.com

8-imgspark.com

9-thecssblog.com

10-livestream.com

11-32round.com

12-ceusa.com

13-nameourbaby.ca

14-zunostudios.com

15-monassoc.com

16-freeagentcentral.com

17-myfonts.com

18-berttimmermans.com

19-outlawdesignblog.com

20-atebits.com

21-vyniknite.sk

22-apple.com

23-expressionengine.com

24-apple.com

25-jepcoministorage.com

26-simplifiedbuilding.com

27-getmiro.com

28-ministryofsound.com

29-cnn.com

30-bohemiancoding.com

31-veer.com

32-fidesvita.org

33-audi.de

34-wireandtwine.com

35-bigbrownbox.com.au

36-postrank.com

37-domestika.org

38-thewojogroup.com

39-whatalovelyname.com

40-kids.threadless.com

41-tumblon.com

42-mormon.org

43-jivesoftware.com

44-yourchurch.com

45-bell.ca

46-designologue.com

47-onebuttonmouse.com

48-cnn.com

49-dmry.net

50-facebook.com

Çevrimiçi Banner Hazırlama

İnternet sayfalarında gördüğümüz değişik boyutlardaki duyuru, reklam gibi işlevler için kullanılan afişlere banner diyoruz. Bannerlar internet sayfalarında eskiden bu yana yerini korudu. Eskiden daha janjanlıydı. Yanar döner bannerlar karşılıyordu bizi sayfalarda. Ancak internetin evrim geçirmesi ile birlikte bannerlar da yerini daha göze hoş gelen ve daha hareketsiz resimlere bıraktı. Bunun yanında internet üzerinde banner hazırlamamıza yardımcı servisler de türedi. Şimdi bunlardan birini inceleyeceğiz.

Continue reading

Resim Optimizasyon Servisi PunyPNG

Resim optimizasyonu aslında web açısından çok önemli bir konudur. Büyük boyuttaki resimleri paylaşım sitelerini yüklerken çekilen sıkıntıları az çok hepimiz yaşadık. Bunun yanında kendi alanını kullanan site sahipleri de bandwidth dediğimiz sitenin trafik kotasına takılabiliyor. Ancak resim kalitesini bozmadan büyük boyutlu resimlerimizi bile çok küçük bir büyüklüğe ayarlamamız mümkün olabiliyor. Bunu sağlayan birçok masaüstü yazılımı mevcut. Biz yazılımdan ziyade bu işi güzelce yapan bir internet servisine değineceğiz.

Continue reading

Hazır Web Araçları

Uzun zamandır yazmayı planladığım bu yazımda bir köşeye ayırdığım web araçlarını hep birlikte inceleyeceğiz. Aslında bu yazıyı bir bakıma kendim için de yazdım. Çünkü hangi araç nerdeydi karmaşası yaşıyorum çoğu zaman. Bunun önüne geçmek için de açıklamaları ile birlikte bir köşeye not etmem gerekiyordu. En güzel not edilecek yerinde burası olduğunu düşündüm. Hem sizlerle paylaşmak adına hem de aradığımı kolayca bulmak adına. Yani en az sizin kadar ben de faydalanacağım bu yazıdan.

Continue reading