bildirgec.org - enginseftalici - beğendikleri

33+ Flaş ve Javascript fotoğraf galerisi

enginseftalici — Fri, 20 Mar 2009 09:50:00 GMT

Merhaba arkadaşlar, internette kendim için bazı fotoğraf galerileri araştırırken çok güzel galeriler buldum fakat kendim için bir tanesini beğendim. Ben de kendi zevkime göre bulduğum bu sitedeki foto galerileri sizinle paylaşmak istedim. İlk olarak Javascript galerilerinden başlayalım. İşte onlardan birkaç örnek

Galleria

Bu gördüğünüz galeri jQueri ile yazılmıştır. Alt tarafında resimlerin küçük görüntüleri bulunmaktadır ve harika bir görünüme sahiptir.
Demosu İndirin

minishowcase

Gördüğünüz bu galire de Javascript tabanlıdır ve görsel açıdan çok zengindir. İçine istediğiniz resimleri albüm olarak gruplara ayırabilirsiniz.
Demosu İndirin

İmago

Diğer verdiğim foto galerilere benziyor fakat bunun tasarımı flaşla yapılmış gibi. Yani Görsel açıdan diğerlerinden daha güzeldir. bunda da Javascript kullanılmıştır.
Demosu İndirin
Ve şimdi de Flaş Galerilere geçiyoruz:

Flash Gallery

Gördüğünüz bu flaş galeri Xml ile kontrol ediliyor yani istediğiniz resimlerin bulunduğu konumlarını xml dosyasına giriyorsunuz böylelikle daha kolay düzenleyebiliyorsunuz bunun dışında resimleri tam ekran görüntüleyebiliyorsunuz.
Demosu İndirin

Flash Foto Stack

Bu Flaş galerinin diğerlerinden farkı çok güzel resimler arası geçişlerde kullanılan animasyondur.
Demosu İndirin

Photo Viewer

Gördüğünüz bu flaş galeriyi üç renkte kullanabilirsiniz bunu dışında resimlerin alt bölgesine de çok güzel bir yazı tipiyle önbilgi ekleyebilirsiniz.
Demosu İndirin
Daha Fazlasına burdan ulaşabilirsiniz

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

ücretsiz 10 adet video düzenleme aracı ve daha fazlası

enginseftalici — Thu, 05 Mar 2009 15:03:00 GMT

İndirilebilir ve ücretsiz video düzenleme araçlarını birarada görebilirsiniz.

Avidemux
Basit kesme, filtreleme ve çevirme işlemlerini kolaylıkla yapabilirsiniz. AVI, MPEG, MP4, ASF gibi formatların yanında çok fazla sayıda dosya tipini destekler.

avidemux

Jahshaka
Videolarınıza 3 boyutlu efektler verebilirsiniz. Bunun yanında kesme, birleştirme yapabileceğiniz profesyoneller için de güzel bir ücretsiz program.

jahshaka

Virtualdub
Çok sayıda edit işlemi içeren kullanımı kolay bir video programı. Görüntü düzenleme filtre hizmeti var. Program tüm standart codec'lerle uyumlu çalışıyor.

virtualdub

ZS4 Video DüzenleyicisiFotoğraf, video ve ses dosyalarını birleştirebileceğiniz edit programı.

ZS4

WaxVideolarınıza çeşitli efektler ekleyebileceğiniz 2D ve 3D çalışabileceğiniz bir program. Giriş biçimleri: AVI, WAV, tüm popüler görüntü biçimleri. Çıkış biçimleri: AVI, MPEG, WAV, Flaş, tüm popüler görüntü biçimleri.

vax

Vivia
Linux ve Windows için video düzenleme programı. DV materyalleriyle dvd kalitesini sunuyor.

vivia

AVIedit
Videolarınızdan yeni bir video oluşturabilir, 30 adet video efektiyle avi dosyaları üzerinde oynayabilirsiniz.

AVIedit

AVItrimmer
avi formatındaki dosyaları çok hızlı ve eksiksiz bir şekilde kesebilirsiniz. Kalitesi asla bozulmaz.

AVItrimmer

Videospin
"movie maker" arayüzüne benziyor. resim ve videolarınızla klip yapabilir, düzenleme ve efekt uygulayabilirsiniz.

videospin

DVD Knife
dvd'nizden çok hızlı bir şekilde parçalar kesip klipler oluşturmanızı sağlar. Çıkartılan klipler sadece dvd formatında saklanır.

DVD knife

Bunlar bana yetmez diyorsanız y ada ücretsiz video düzenleme web servislerini de görmek istiyorum diyorsanız hepsi burada

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

çok eğlenceli ve kaliteli fotomontaj siteleri

enginseftalici — Fri, 06 Mar 2009 13:00:00 GMT

Fotoğraflarınızla çok kolay bir şekilde eğlenceli fotomontaj çalışmaları yapabileceğiniz, hazır şablonlu web sitelerini bilgilerinize sunuyorum:

PhotoFania
İsterseniz Angelina Jolie'nin t-shirt'üne resminizi yapıştırın, isterseniz bilboardlara reklam olun. Çok basit bir şekilde oldukça orjinal ve komik resimler elde edeceksiniz, bu resimleri jpg formatında ya da avatar olarak bilgisayarınızda saklayabileceksiniz.

PhotoFunia

FunPhotoBux
Photofunia'ya göre seçim hakkınız daha çok. Kullanmak istediğiniz resmi istediğiniz yerden kırpma imkanı da sunuyor. 3 adımda işlem tamam. Harika!

FunPhotoBux

Bu iki programın uygulama özelliklerine yaklaşık olarak benzer diğer sitelerin isimlerini vermek yeterli olabilir:

photo505 çok sayıda enteresan efektler bu sitede.
loonapix bu sitede resim efektlerinin yanı sıra yüz ekleme, çerçeve oluşturma, davetiye düzenleme gibi mükemmel eklentiler var ki görülmeye değer.

Picartia
Fotoğraflarınızı 3 adımda online ve ücretsiz olarak sizin belirleyeceğiniz mini imajlar ile mozaikliyor.

picartia

hairmixer
Saçlarınızı değiştirin, özgür olun. Senin saçın benim saçım, benim yüzüm senin yüzün mantığıyla yeni imajınızı belirleyin. kafanız değil, saçlarınız karışsın.

hairmixer

magmypic
fotoğrafınızı yükleyin, sahte dergiler oluşturun. manşetinizi atın. arkadaşlarınıza ilginç süprizler yapın.

magmypic

Benzer dergi kapağı magazin cover siteleri :
frontpage 136 farklı dergi dizaynı.
fakemagazinecover resimlerinizden kapak yapın. herkese kapak olsun.

pizap
"ben işi artık manyaklığa vardırıcam" diyorsanız çılgın şablon ve efektler bu sitede. resimlerinizi karikatürize etme imkanı veriyor.

pizap

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

PDF dosyalarınızı yazıya aktarın - PDF to Word

enginseftalici — Tue, 03 Mar 2009 07:06:00 GMT

Henüz davetiye usulüyle üye kabul eden PDF to Word , online olarak PDF dosyalarınızı Word formatına, yani yazıya aktarmanızı sağlıyor. Burada okuduğumuza göre SmashingApps ile PDF to Word anlaşması sonucu kayıt olurken Code kısmına "smashingapps" yazmanız yeterli olacaktır. Son gün 7 Mart Cumartesi'ymiş. Kayıt olup kullananlar deneyimlerini paylaşırlarsa seviniriz..

bu arada daha önce gördüğümüz bu tarz programlar ve web servisleri de burada

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

Her zaman aradığımız 29 adet CSS/Ajax/Java/Dhtml Galeri sistemi

enginseftalici — Thu, 05 Feb 2009 17:38:00 GMT

1 . Minishowcase
Minishowcase küçük ve çok basit bir Ajax galeri sistemi. Kullanım konusunda basitliği ile tasarımcı dostu diyebilirim. mutlaka inceleyin.

2. JonDesign’s SmoothGallery
JS dosyası sadece 16kb olan bu galeri sisteminde Jon Design birçok sitede gördüğümüz bir yapıyı bizimle paylaşıyor. Koyu renk tasarım seçmiş ve fotoğraf ağırlıklı bir tasarım anlayışına sahip tasarımcılar için birebir.

3. Ajax Photo Gallery
Birçoğumuzun bildiği Agile Gallery basit ve öz.

4. Pyxy-gallery
Bu sistem biraz eski olmasına rağmen çeşitli düzenlemeler ile tasarımınıza en iyi uygulayabileceğiniz galeri sistemlerinden birisidir.

5. Zenphoto
Online galeri çözümlerinin bence cevabı Zenphoto sistemidir. Birçoğumuzda elbet bir şekilde bu sistem ile buluşmuşuzdur:) fazla söze gerek yok.

6. Couloir.org: Resizing, Fading Slideshow Demo - AJAX Slideshow
Bu sistemi şiddetle incelemenizi öneririm. Belki biraz flash galeri sistemlerini anımsatıyor ama kullanımı ve düzenleme altyapısı okadar basit ki... imaj portfolyo ve fotoğrafçılar için en uygun sistemlerden biri diyebilirim!

7. Grey Box
Buna da şiddetle bir bakın demek zorundayım. Tasarımında çok fazla imaj külfeti olanlar için mükemmel bir çözüm olabilir.

8. LightBox 2
Yabancı gelmedi biliyorum evet, doğru hepimizin bildiği o muhteşem script.

9. Multifaceted Lightbox
Bu galeri sistemi için aslında fazla söze gerek yok, tekrarlıyorum fotoğrafçılıkla uğraşanlar için gayet başarılı bir sistem.

10. Slightly ThickerBox 1.7
Basit ve öz Light Box2 ye benzerliğiyle bilinen galeri sistemi.

11. TripTracker
Bu sistem isminden de anlayabileceğimiz gibi gezilerimiz için yarattığımız galerilere en iyi çözüm. Bunların dışında Şiddetle öneririm!

12. Slimbox, the ultimate lightweight Lightbox clone
Mootols tabanlı o güzel galerilerden biri daha.

13. Suckerfish HoverLightbox
Bu sistemi çok beğeneceğinizden eminim. Klasik fikirlerden bıkmış olanlar için ideal olabilir.

14. Suckerfish HoverLightbox Redux
Bir önceki sistemimizin farklı bir versiyonu, değişik diyebilirim :)

15. ThickBox 2.1.1
İşte bir klasik daha.

16. A Photograph Gallery
Görünüm olarak hepimizin anımsayacağı bir sistem olan A photograph gallery çeşitli görsel düzenlemeler ile güzel olabilir. CSS Tabanlı.

17. A simple CSS photo-album
İsminden zaten anlıyoruz ki ->

18. Cross Browser Multi-Page Photograph Gallery
İşte Bu! dediğim galeri sistemlerinden birisi benim çok işime yaramıştır eminim sizin de yarayacak!

19. CSS Image Gallery
Basit ve Öz.

20. CSS: Photo Showcase
Bu sistemi kullanmanızı şiddetle tavsiye ederim özellikle portfolyo sistemlerinde gayet şık olabiliyor.

21. HowerBox Image Gallery
Birçoğumuzun en az bir kere kullandığını düşündüğüm sistem.

22. Photo Scroll Gallery
Bu sistemi de sörf yaparken çok görmüşüzdür.

23. Sliding Photograph Galleries
Bu sistemi birçok kişi bir şekilde reklam ve google adsense yapısı gibi kullanıyor.

24. xImgGallery - Javascript Image Gallery & Slideshow
Kullanım açısından çok basit olan bu sistem biraz düzenleme sayesinde tasarım ile tam uyum sağlıyabilir.

25. Easy Album
Bu sistemi de birçoğumuz yakından tanıyacaktır. Çok çok basit ve kullanıcı dostu bir galeri sistemi. Basit kullanımı ile kullanıcılarınıza en iyi sunumu yapabilirsiniz.

26. Image Gal
Mini galeri diyebileceğimiz bir sistem. basit imaj gösterim sistemlerini sevenler için ideal.

27. Highslide JS
Bu sistem de hepimizin kullandığı mevcut diğer sistemler ile çok benzerlik taşıyan bir galeri sistemi. Tavsiye ederim.

28. Satellite
FlickR ile de çok iyi entegre çalışabilen bir sistem. Şu anda galiba ücretli veya üyelik gerektiriyor.

29. Dhonishow

Buna da kesin bakın derim, CMS sistemini kullanan arkadaşlarımız elbet latest photos gibi bir modülü buna uyarlayabilirler.

Kaynak : Neredeyse 2 yıldır kullandığım bu galerileri bir araya toplayan smashing magazine sitesinden kendi derlemelerim.

Bu yazı enginseftalici tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Uygulamaları İçin En İyi 21 Simge Seti

enginseftalici — Tue, 13 Jan 2009 14:15:00 GMT

Bir web uygulaması tasarlarken kullanıcı arabirimini kolay kullanılabilecek şekilde tasarlamak önemlidir. Gezinti (navigasyon) bağlantılarının yanı sıra simgeler kullanmak bu hedefe ulaşmak için üzerinde çalışmamız gereken önemli bir görevdir. Ancak uzun zamanınızı alacak simge setlerini baştan oluşturmak yerine neden başkalarının sizler için oluşturduğu simge setlerini kullanmayasınız? Bu yazıda web uygulamaları geliştirmek isteyen kullanıcıların uygulamalarında kullanabilecekleri en başarılı simge setlerini listelemeye çalıştım.

Jonas Rask Design Icons for Developers

Jonas Rask Design Icons for Developers

ASP.NET Icons

ASP.NET Icons

Tango Icon Library

Tango Icon Library

Aesthetica Icons

Aesthetica Icons

Diagona Icons by pinvoke

Diagona Icons

Fugue Icons by pinvoke

Fugue Icons

FAMFAMFAM - Silk

FAMFAMFAM - Silk

Web Application Icon Set

Web Application Icon Set

Coquette Icons

Coquette Icons

Free web development icons #4 SE

Coquette IconsFree web development icons #4 SE

Developpers Icons

Developpers Icons

Knob Buttons Toolbar Icons

Knob Buttons Toolbar Icons

Simplistica Icons

Simplistica Icons

Function Icon Set

Function Icon Set

Milky

Milky

Simplico

Simplico

Fresh

Fresh

FAMFAMFAM - Mini

FAMFAMFAM - Mini

Crystal Clear

Crystal Clear

Monofactor Vector Icons

Monofactor Vector Icons

IVista Icon Pack 2

IVista Icon Pack 2

Bu yazı enginseftalici tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcıları İçin 10 Kullanılırlık İpucu

enginseftalici — Mon, 05 Jan 2009 12:13:00 GMT

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.

2. Site İçi Arama Motoru Kullanın
Tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. Kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

Jacob Nielsen'in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için 27 karakter genişliğinde olmalı. Arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri F yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

3. Çok Fazla Grafik Kullanmayın
Tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. Web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. Kullanılırlık açısından daha az her zaman daha verimlidir.

4. Site Haritaları (Sitemap) Kullanın
Site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (SEO) iyileştirir. Site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. Herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

Son zamanlarda Google, Yahoo! ve MSN gibi arama motorları Sitemap protokolleri sunmaya başladılar. Bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler XML biçiminde depolanır. Internet üzerinde bu belgeleri sizin vereceğiniz adres için XML biçiminde oluşturabilecek bazı araçlar bulunuyor.

5. İş Akışını Kesmeyin
İş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruz.Örneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. Bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. Kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

Bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). Javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

Bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. Kolayca Taranabilir Sayfalar Oluşturun
Kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. Kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

Jakob Nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği F yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

Nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

Kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. Sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
İlk iki paragraf web sayfasında önemli yer tutar. Bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar.
Alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. Bu elementleri önemli bilgileri vurgulamak için kullanın.

Gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. Bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. İçeriği ters dönmüş piramit şeklinde organize ederler. Ters dönmüş bir piramiti hayal edin. Üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

En önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? Haber değerlerinin yardımı ile.

7. Yanlış Yönlendiren Kullanıcı Arabirimi Kontrolleri Tasarlamayın
Kullanıcı arabirimi (UI) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayınGenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

Kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. UI kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: UI kontrollerinin tutarlı olduğuna emin olun.

Yukarıdaki resimden de görebileceğiniz üzere Yahoo!, tutarlı UI kontrol tasarımına güzel bir örnektir. Sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. Anlamlı Geribildirimler Verin
Anlamlı geribildirim bir web sitesi için önem arz eder. Bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. Diyelim web sitenizde bir hata var. Doğrudan Hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

Geribildirimler her iki yönde işler. Bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. Kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. Örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. Bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. Çok fazla Javascript Kullanmayın

Javascript ve AJAX tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. Bizim durumumuzda bu tarayıcı tutarsızlığı. Her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak Javascript aktif edilmemiş olabilir.

Bir websitesinde çok fazla JavaScript kullanarak bu kullanıcıları engellemiş oluruz. Bunun yerine daha mütevazı ve yalın Javascript kullanın.

CAPTCHAlardan Kaçının

Türkçe'si "İnsanlarla Bilgisayarları ayırt edebilmek için Tümüyle Otomatikleştirilmiş Yerel Turing Testi" (Completely Automated Public Turing Test to tell Computers and Humans Apart) olan CAPTCHA'nın adı bile karmaşık. CAPTCHA'nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir.

CAPTCHAların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür (yamutulmuş metni anlamak, iki rakam eklemek vs).

CAPTCHAlarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. Örneğin Çince semboller, numaralar pek çok batı dilinden ve Arapça'dan farklıdır. Çinliler CAPTCHA kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

Özet

Daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
Çok fazla grafik ve tasarım elementleri kullanmayın.
Site haritası sayfası hazırlayın ve site haritası XML verisini arama motorlarına kaydedin.
Kullanıcının iş akışının önünü tıkamayın. Gerektiğinde her işlemin iptal edilebilmesini sağlayın.
Kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
Anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
Daha mütevazı Javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
CAPTCHAlardan kaçının ve daha kullanışlı yöntemler kullanın.

Siz de bu yöntemlerden bir veya daha fazlasını kullanıyor musunuz? Kendi ipuçlarınızı ve görüşlerinizi yorumunuzda belirtmeyi unutmayın

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

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

SEO Araçları Listesi

enginseftalici — Wed, 31 Dec 2008 18:36:00 GMT

Türkçe'ye Arama Motoru Optimizasyonu olarak çevirebileceğimiz SEO (Search Engine Optimization), Internet üzerinden projelerinin popülerliğini arttırmak isteyen kişi, kurum ve kuruluşların dikkat etmesi gereken en önemli elementlerin başında geliyor. Uluslararası pazarda milyonlarca dolarlık pazara ulaşan bu sektörden geçimini sağlayan yüzlerce irili ufaklı şirket ve şahıs bulunuyor.

SEO uzmanlarının dikkat etmesi gereken pek çok faktör bulunuyor. Bunlar arasında web sitesinin nasıl kodlandığı ve web standartları ile olan uyumu, site içeriğinin bir bütün olarak algılanabilmesi, bir makinenin sitenizi nasıl okuyabileceğinin analiz edilmesi, hedef kitle analizi ve anahtar kelime raporları oluşturma bunlardan sadece birkaçı.

Benim gerek kendi projelerimde, gerekse de müşterilerim için kullandığım bir dizi araç bulunuyor. Tam bu araçlara yönelik bir bildiri hazırlamak üzereyken İtalyanca yayım yapan WebAir Blog'un şuradaki makalesi ile karşılaştım ve sizlerle paylaşma ihtiyacı hissettim. SEO'ya gönül veren ve bu konuda kendini geliştirmek isteyen kullanıcıların kullanmasını şiddetle önerdiğim bu liste umarım işinize yarayacaktır.

Analiz

WebSite Grader » Ücretsiz Analiz Raporu Oluşturucusu
Google Analytics » Webmarketing Analizi
Google Webmaster Tools » Analiz ve Website kontrolü için önemli araçlar
PageRank Tool » Website'lerin pagerank değerleri hakkında bilgi.
Google Position » Sitenizin Google'daki Pozisyonu

Website Optimizasyonu

HTML Validation » Resmi W3C HTML Kod Doğrulaması
CSS Validation » Resmi W3C CSS Kod Doğrulaması
Google Website Optimizer » Sitenizi Optimize etmenize yardımcı bazı deneysel araçlar
H1 Tag » H1 etiketini nasıl kullanmalı (W3C Sayfası)
Robots.txt » robots.txt dosyasını nasıl kullanmalı
XML Sitemap Generator » 500 URL'ye kadar ücretsiz Sitemap oluşturucusu

Webmarketing

Google Adwords » Resmi Google Adwords Sayfası
DMOZ » Link dizini
Del.icio.us » Bookmark dizini
Reddit » Bookmark dizini
Technorati » Bookmark dizini
Stumbleupon » dizini
Digg » Bookmark dizini
Twitter » Resmi Twitter sitesi
Facebook » Resmi Facebook sitesi
Google Webmaster Blog » Webmasterlar ve SEO için Google Blogu

Diğer

Matt Cutts Blog » Resmi Cutts Blogu

Bu yazı enginseftalici 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 adet ücretsiz Photoshop 3d metin efekti dersi

enginseftalici — Wed, 17 Dec 2008 12:49:00 GMT

daha önce şurada, şimdilerde oldukça popüler olan ve giderek daha fazla sitede görmeye başladığımız, 3d tipografik çalışma örneklerine yer vermiştik.
bu bildiride ise çalışmalarımızda kullanabileceğimiz, 3-boyutlu metinler oluşturabilmemizi sağlayacak olan 10 adet photoshop 3d metin efekti dersine yer vereceğiz.

1 - çim metin efekti

2 - ipe asılmış metin efekti

3 - Design Soft Stylized 3D Type

4 - yanan metin efekti

5 - Fresh Typographic Effect

6 - cold ice 3D Effect

7 - 3D Textured Text Effect

8 - Valentines Day Photoshop Style

9 - 3D Cliff Text

10 - 3D Colorful Text Explosion

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