bildirgec.org - xxxman - beğendikleri

33+ Flaş ve Javascript fotoğraf galerisi

xxxman — 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ı xxxman 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 site şablonları

xxxman — Sat, 21 Mar 2009 11:00:00 GMT

photoshop'ın birçok kullanım alanı var bildiğiniz gibi. bu alanlardan biri de site şablonları. kodlamaya geçmeden önce tasarımınızı photoshop'ta hazırlayabilir, kullanacağınız görsellere çeşitli efektler uygulayabilirsiniz. şurada konu ile ilgili 10 güzel şablon listelenmiş.

daha fazlasını arıyorsanız photoshop dersleri ve kaynakları yazısını inceleyebilirsiniz.

Bu yazı xxxman 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 anket oluşturun: SiS Survey

xxxman — Tue, 03 Mar 2009 11:43:00 GMT

SiS Survey ile bir dakika içinde anketler ve araştırmalar oluşturabilir ve web sitenize yerleştirebilirsiniz. Basit ve esnek anketler oluşturarak kullanıcılarınızın dikkatini çekip anketinize geniş çaplı bir sonuç bulabilir ve raporları anında görebilirsiniz.

Özellikleri:

Gerçek zamanlı çevrimiçi raporlama.
Resim, video vs. eklemen için html izni.
Yabancı dil seçenekleri.
XML, CSV ve RSS kullanımı.
Özel anket başlangıcı ve bitiş tarihi ayarı.
Css ile kendi anket temanı oluşturma.

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

WordPress'i Kurduktan Sonra Yapılması Gereken 10 Şey

xxxman — Sat, 28 Feb 2009 13:09:00 GMT

5 dakikada WordPress kurulumu mükemmeldir ve çoğu zaman bir blog oluşturmak oldukça kolaydır. Karmaşık hiçbir şey yoktur. Ancak WordPress'in kurulumunu tamamladıktan sonra blogunuzdan tam verim alabilmek için yapılması gereken bazı şeyler vardır.

Aşağıdaki listeyi bir kontrol listesi olarak kullanın ve her bir yeni WordPress kurulumunda bu listedekileri uygulamaya çalışın.

1. Admin (Yönetici) Şifresini Değiştirin ve Yazarlarınızı Yönetin
WordPress her kurulduğunuda yönetici hesabı için otomatik olarak bir şifre atar ve bu şifreyi hatırlamanız neredeyse mümkün değildir. Bu sebeple ilk olarak yönetici hesabının şifresini hatırlaması daha kolay bir şifre ile değiştirin.

Kullanıcı ayarlarını Kullanıcılar (Users) paneli üzerinden ayarlayın. Yine aynı sayfa üzerinden blogunuza yeni yazarları ekleyebilirsiniz.

2. Permalinkleri Düzenleyin
Öntanımlı olarak yazılarınızın URLleri http://www.bildirgec.org/?p=123 gibi görünecektir. Bu URL yapısı hem arama motoru optimizasyonu hem de kullanılabilirlik açısından zayıftır (son kullanıcıya hiçbir şey ifade etmez).

URL yapınızı http://www.bildirgec.org/wordpressi-kurduktan-sonra-yapilmasi-gereken-10-sey/ olarak görünecektir. Bu sayede yazınızın anahtar kelimelerini URL'ye dahil etmeniz mümkün olacaktır. Blogunuzun URL altyapısını düzenlemek için yapmanız gereken şeyler şunlar:

Settings » Permalinks sayfasına gidin.
'Common Settings' altından 'Custom Structure''ı seçin.
%postname%/ yazın.
Ya da URL üzerinde kategorinizin yer almasını istiyorsanız %category%/%postname%/ girebilirsiniz.

3. Temanızı Yükleyin ve Etkinleştirin

Tema indirin ya da kendi temanızı tasarlayın.
Zip dosyasını açın ve wp-content\themes klasörüne yükleyin.
Appearance » Themes altından temanızı aktive edin.

4. Kategorilerinizi Ekleyin ve Varsayılan Kategoriyi Değiştirin
WordPress'i kurduğunuzda öntanımlı kategorinin adı Uncategorized idir ki bunun da pek güzel göründüğünü söyleyemem. Günün birinde bir yazı yazdığınızda kategoriyi seçmeyi unuttuğunuzu düşünün. Bu durumda yazınızın hangi kategori altında yer almasını istersiniz? Ben genelde Haberler ya da bunun gibi bir şey kullanmayı tercih ediyorum.

Posts » Categories kısmına gidin.
'Uncategorized' üzerine tıklayın ve kategorinin adını değiştirin.
Diğer blog kategorilerinizi ekleyin.

5. Akismet'i Etkinleştirin
Akismet WordPress eklentisi sayesinde blogunuzu sahte (spam) yorumlardan ve girdilerden korumuş olursunuz ve inanın bana, eklentiyi kurduktan sonra spam içerikli yorum alma ihtimaliniz neredeyse yok denecek kadar azdır. WordPress geliştiricileri de eklentinin gücünü anlamış olacaklar ki Akismet eklentisini WordPress'in içine dahil etmişler. Burada tek yapmanız gereken onu etkinleştirmek.

Plugins sayfasına gidin ve Akismet'i etkinleştirin.
Akismet etkinleştirmesini tamamlamak için WordPress'in bir API anahtarına ihtiyacı var. Bu anahtarı almak için WordPress.com üzerinde ücretsiz bir hesap açabilir ve ardından profiliniz üzerine tıklayabilirsiniz. Profil sayfanızın üst kısmında API anahtarını göreceksiniz. Anahtar dizisini kopyalayın.
Şimdi Plugins » Akismet Configuration kısmına gidin ve anahtarınızı ilgili alana yapıştırın.

6. Google XML Sitemaps eklentisini girin
Google XML Sitemaps standartlarla uyumlu XML sitemap oluşturarak Google, Yahoo!, Ask ve MSN gibi arama motorlarının sitenizi kolayca veritabanlarına eklemelerine yardımcı olur. Eklenti arkaplanda sessizce çalışacak ve siz ne zaman bir yazıyı düzenlediğinizde ya da blogunuza yeni bir yazı girdiğinizde sitemap kendisini güncelleyecektir.

Eklentiyi indirip sitenize kurduktan sonra Google Webmaster Araçlarını ziyaret edin ve Google hesabınızla servise giriş yapın. İlk sayfada sitenizi doğrulayabileceğiniz bir bağlantı göreceksiniz. Oradaki yönergeleri izleyin. Bu işlem tamamlandıktan sonra "Add Sitemap" bağlantısına tıklayarak sitemap'inizin URL'sini ilgili alana yapıştırmanız yeterli.

7. WordPress Veritabanı Yedeklemesini Kurun
Düzenli olarak yedek almak her zaman iyidir. Sunucunuzda birşeyler yanlış gidebilir ya da kendiniz hiç beklemediğiniz bir anda bir hataya neden olup sitenizin göçmesine neden olabilirsiniz.

WordPress Veritabanı Yedekleme WordPress blogunuzu yedekleyebilen bir araç. Dilerseniz eklentinin ayarlarından eklenti sitenizin yedeğini aldığında ilgili yedeği otomatik olarak elektronik posta adresinize gönderilebilmesini sağlayabilirsiniz.

8. Blogunuzu Test Edin
Blogunuzu farklı biçimlere sahip yazılar ve yorumlar eklemeden tam anlamıyla test etmeniz pek mümkün değildir. WP Candy üzerindeki örnek yazı kolleksiyonundan faydalanarak blogunuza farklı biçimlere sahip yazılar girebilirsiniz.

Örnek yazı kolleksiyonunu sitenize girebilmek için Tools » Import & raquo; WordPress altından siteden indireceğiniz dosyayı blogunuza dahil edebilirsiniz.

9. RSS beslemenizi Feedburner'a Dahil Edin

İlk önce RSS ayarlarınızı değiştirin. Settings » Reading altından RSS beslemenizde kaç adet yazı görüntülemek istediğinizi ve yazılarınızın tamamını görüntülemek isteyip istemediğinizi değiştirebilirsiniz.

Şimdi de beslemenizi Feedburner'a kaydetmek isteyeceksinizdir. Feedburner beslemeniz hakkında size bir dizi kullanışlı bilgi verebilen ve sitenizdeki güncel haberleri diğer blog servislerine otomatik olarak bildiren kullanışlı bir servistir.

Feedburner'a kayıt olduktan sonra beslemenize ait bağlantıyı temanız üzerinde güncellemeniz gereklidir. Aşağıdaki kodu head etiketleri arasına yerleştirin.

<link rel="alternate" type="application/rss+xml" title="Feed Title" href="FEEDBURNER URLniz" />

10. Analytics Servisi Kullanın

Kullanıcılarınızın ve trafiğinizin izini sürün. Ben her ne kadar Google Analytics'i önersem de website trafiğinizi takip etmenin 50 yolunun daha olduğunu unutmayın.

Kaynak: Pro Blog Design

WordPress İle İlgili Yazdığım Diğer Yazılar

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

Yerli web geliştirme platformu

xxxman — Tue, 24 Feb 2009 17:47:00 GMT

Türkiye'de üretilmiş ama adı yeterince duyulmamış bir yazılımdan bahsedeceğim. Yazılımın adı Moremotion Aplication Studio. Daha önce bildirgec'de 2002 yılında burada, 2003 yılında da burada konu olmuş. Ama o zaman daha çok gelişme aşamasında olduğu için fazla ilgilenen olmamış. O günden bu yana Mor Yazılım firması boş durmamış ve sistemi sürekli olarak geliştirmeye devam etmiş.
Moremotion A.ş, Java tabanlı olarak geliştirilen Moremotion framework'ü üzerinde açık kaynak kodlu web uygulamaları geliştirme ortamı sunuyor.

Moremotion

Diğer geliştirme ortamlarından farklı olarak XML/XSL teknolojileri kullanılarak Java tabanlı web uygulamalarını çok kısa sürelerde çoğu zaman tek satır kod yazmadan geliştirebilirsiniz. Özellikle Ajax uygulamalar için de hazır araçlar entegre olarak bulunuyor. Tam olarak tasarım ekranında ne görürseniz onu alıyorsunuz.

Programın yardım dökümanları oldukça detaylı ve Türkçe. Sadece yardım dökümanlarını okuyarak gelişmiş uygulamalar yapılabilir.
Kod yazarak yazılım üretenlere pek cazip gelmeyebilir ama kodlarla pek uğraşmak istemeyenler için biçilmiş kaftan. Lafı daha fazla uzatmadan sizi aşağıdaki linklere davet ediyorum :
Mor Yazılım Ana Sayfa
Mormotion Özellikleri
Forum
Tanıtım Videoları
Download

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

960 css çatısına yakından bakış

xxxman — Sun, 15 Feb 2009 13:13:00 GMT

CSS çatılarının (framework) sayısı her geçen gün biraz daha artıyor. CSS çatıları özellikle CSS ile kod yazmak konusunda henüz kendisini yeteri kadar geliştirmemiş olanlar için kimi zaman oldukça kullanışlı bir hal alabiliyor. Ancak bazı CSS profesyonellerine ve diğer dillerin programcılarına göre CSS, üzerine bir çatı geliştirilmesi gerekecek kadar zor bir dil değil.

Eğer herhangi bir CSS çatısı üzerine bir rehber okuduysanız, ilgili rehberlere bırakılan pek çok yorum yukarıdakilerle aşağı yukarı aynıdır. Benim görüşüm bu tip yorumların büyük çoğunluğunun bir miktar tatminsizliğe bağlı olduğu yönünde. 960 üzerinde biraz zaman geçirdikten sonra, web uygulamalarınızı geliştirirken size ne kadar zaman kazandırabileceğine inanamayacaksınız. Hiç olmazsa ilgili çatıyı sadece bir 10 dakikalığına inceleyin. Her zaman klavyenizin delete düğmesine basabilirsiniz ancak bunu yapacağınızdan şüpheliyim.

Artıları

Geliştirme zamanını önemli ölçüde kısaltıyor.
Temiz ızgara yapısına sahip.
Farklı tarayıcılar üzerinde problemlerle karşılaşma ihtimaliniz çok düşük. Bulduklarınızı da kolayca düzeltebilirsiniz.
Pek çok kişinin söylediğinin aksine "abartılmış" değil. Burada 3-4 KB'den bahsediyoruz arkadaşlar! Bu tip stillemelerinin pek çoğunu zaten neredeyse tüm web uygulamalarında kullanıyorsunuz.
Karmaşık anahatları kolayca oluşturun.

Eksileri

Adının "960" olmasının bir nedeni var. Web siteniz için başka bir genişliği kullanmak istiyorsanız, o zaman diğer çatılara göz atmanızı öneririm.
Diğer tüm "çatılarda" olduğu gibi bazı kısıtlamalarınız yok değil.
Onu siz yapmadınız. Kodun %100'ünün size ait olmasının verdiği his bir başkadır.

Kullanım
12 sütuna sahip bir altyapı üzerinde aşağıda gördüğünüz gibi oldukça sade bir anahat hazırlmak istediğinizi hayal edin. İlk olarak "container_12" adındaki bir sınıfa sahip bir kapsayıcı bir div oluşturmamız gerekiyor. 12'ye dikkat edin.

<div id="container" class="container_12">  
...içerik buraya  
</div>

Burada bir ID tanımlamanızın kesinlikle gereği yok ancak ben özellikle divin ne amaçla kullanıldığını daha sonra kolayca anlayabilmek adına divlerime genellikle bir ID atarım. 960'ın kötü yanlarından birisi de sınıfların elementin ne amaçla kullanıldığını belirtecek herhangi bir tanım içermiyor oluşu. Bu sebeple DIV'e bir ID ekleyerek bu kavram sorununu kolayca gidermiş oluyoruz.

Izgaralar

Şimdi de basit bir başlık ve iki sütunlu bir altyapı oluşturmak istiyoruz. Başlamadan önce tanıtıma bakarak ne kadar genişlikte bir ızgara kullanmak istediğinize karar verebilirsiniz.

Başlık genişliği olarak 940px seçeceğim (+20 px de marjlar için = 960), yan çubuk genişliği için 220px ve ana içerik kısmı için de 700 px seçeceğim.

Her bir div elementini bir sınıfa dahil etmelisiniz. Çatının kurallarına göre sınıf isimleri "grid_" öneki ile başlamak ve devamında istenen sütun sayısını girmeniz gerekli. Bizim durumumuzda "grid_12", "grid_3" ve "grid_9" sınıflarını kullanacağız.

<div id="container" class="container_12">  
  <div id="header" class="grid_12">  
    içerik buraya  
  </div>  

  <div id="sidebar" class="grid_3">  
    içerik buraya
  </div>  

  <div id="mainContent" class="grid_9">  
    içerik buraya  
  </div>  
</div

Çatının sunduğu stillerin üzerine her bir div için arkaplan rengi ve minimum genişlik ekledim. Bunu koda eklemedim zira sadece sütunları tanıtımda daha belirgin yapmak için ilgili stilleri kullandım.

Marjlar, yüzen divler ya da IE hileleri ile boğuşmadan bu anahattı inanılmaz derecede çabuk bir şekilde hazırladık. 960'ın gerçek gücü özellikle karmaşık gazete-benzeri arabirimler geliştirmek istediğinizde ortaya çıkıyor. Bu konuda daha fazla bilgi almak istiyorsanız buradaki screencast'ı izleyebilirsiniz.

960 GS İle İlgili İlginizi Çekebilecek Diğer Kaynaklar

960 CSS Çatısı İle Prototip Oluşturma
Grid 960 bir CSS çatısı olup geliştiricilerin hızlıca prototip tasarımlar oluşturabilmelerini sağlıyor. Şablonlar oluşturabilmek için inanılmaz araçlar bulunuyor? Neden mi? Çünkü hepsi sizin daha hızlı sonuçlar alabilmeniz için işin zor kısmını sırtınızdan alabilmenizi sağlıyor.

Makaleyi Ziyaret Edin

WP_Query ve 960 CSS Çatısı İle Gazete Teması Oluşturun
WP_Query oldukça güçlü bir araçtır. Bugün ilgili aracı kullanarak nasıl 3 sütunlu gazete şablonu oluşturabileceğinizi göstereceğim. Ana sütunda tüm blog girdileriniz yer alırken, yanlara ilerledikçe belirli kategorilere ait blogları listeleyeceğiz. Temel anahattımız ve temamızı sıfırlamak için 960 CSS çatısını kullanacağız ki bu sayede, işin büyük bir kısmı tamamlanmış olacak.

Makaleyi Ziyaret Edin

Web Tasarımı İçin Hangi CSS Çatısını Kullanmalısınız?
WordPress ve diğer platformlar için o güzel "magazin" temalarının nasıl oluşturulduğunu hiç merak ettiniz mi? Hepsi olmasa da pek çoğu, CSS Izgara Çatıları kullanılarak geliştirilmiştir. Bu yüzden siz de halihazırda sunulan CSS çatılarını kullanarak kendi magazin temanızı oluşturabilirsiniz. Karmaşık web sayfası anahatlarını çatı kullanmadan oluşturmak mümkün olsa da bunun günümüzde mazoşist bir tutumun bir ürünü olduğunu söylemek yanlış olmaz. Bu makalede günümüzde sunulan çatılara genel bir bakış atacak ve hangisini kullanmanız gerektiğine birlikte karar vereceğiz.

Makaleyi Ziyaret Edin

Kaynak: NETTUTS

CSS Çatıları Hakkında Yazdığım Diğer Yazılar

Bu yazı xxxman 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ımında 3.boyut...

xxxman — Fri, 13 Feb 2009 10:01:00 GMT

Google'lı Facebook'lu yılların web dünyasına katkısı hiç azımsanamaz. Günümüzde web tasarım dünyasında Adobe şirketinin yazılımları ile büyük atılımlar ve grafik tasarım mantığında çok büyük modernleşmeler ve kült tasarımlardan uzaklaşmalar olmakta... Elbette her güzel şeyin bir sonu olduğu gibi tasarım ve görsellik sürecinin de bir uç noktası var, başkası daha iyisini yapana kadar...

Web dünyasındaki 3. Boyutu yansıtan birkaç örnek...

Bu yazı xxxman 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'de uzman olmanızı sağlayacak 20 css dersi

xxxman — Sat, 14 Feb 2009 15:25:00 GMT

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB'a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

1.7. CSS'de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box - Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

2.2. CSS'de Yuvarlatılmış Köşeler
CSS'de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV'lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd'un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE'de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox'dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox'un aksine bu sürüm JavaScript'e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
IE5.5 ve IE6'da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj 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.

5.2. CSS Çapraz 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.

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili "footcollapse" adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

Kaynak: DWS mg

CSS Üzerine Yazdığım Diğer Yazılar

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

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

Yetenekli Ve Ücretsiz 10 Web Analiz Aracı

xxxman — Sat, 10 Jan 2009 08:15:00 GMT

Web analizi, web içeriğinizin verisinin alınarak ve işlenerek, web sitenizin ziyaretçileriniz için nasıl kullanıldığına dair bilgi almanızı sağlar. Internet üzerinde pek çok web analiz aracı bulunuyor ve muhtemelen Google Analytics, Crazy Egg gibi pazarın büyük oyuncularının yanısıra Alexa ve Compete servislerini de duymuşsunuzdur.

Bu makalemizde daha az bilinen web analiz seçeneklerini listelemeye çalışacak ve sizlere yardımcı olacak 10 mükemmel ve ücretsiz aracı ve uygulamayı tanıtacağız. Bu uygulamalar sayesinde web içeriğinizin verisini alabilecek ve analiz edebileceksiniz.

1. Piwik

Piwik Demosu

Piwik açık kaynaklı bir Web analiz uygulaması olup PHP ve MySQL kullanılarak geliştirilmiştir. Uygulamanın "eklenti" sistemi uygulamanın halihazırda sunduğu özellikleri geliştirmenizi sağlar. Sadece ihtiyacınız olan eklentileri alın ya da tüm eklentileri yükleyin. Seçim sizin. Eklenti sistemi, sizin de tahmin edeceğiniz üzere, kendi eklentilerinizi oluşturabilmenizin de önünü açıyor. Bu uygulama gerçekten hafif ve boyutu sadece 1.9MB.

2. FireStats

FireStats Demosu

FireStats PHP ve MySQL kullanılarak oluşturulmuş basit ve söylediğini yapan bir web uygulaması. Uygulama C# sitelei, Django siteleri, Drupal, Joomla!, WordPress ve bir dizi diğer platformu da destekliyor. Daha fazlasına ihtiyacı olan becerikli bir web geliştiricisi misiniz? FireStats'ın, diğer yayımlama platformları için kullanabileceğiniz kendi özel uygulamalarınızı geliştirebileceğiniz mükemmel bir APIsi bulunuyor (WordPress siteniz üzerinde en çok indirilen 10 dosyayı görüntüleyebileceğinizi hayal edin).

3. Snoop

Snoop

Snoop masaüstü tabanlı bir yazılım olup Mac OS X ve Windows XP/Vista platformları üzerinde çalışıyor. Sistem durum çubuğu üzerinde sizi rahatsız etmeden duran bu uygulama, sitenizde herhangi bir eylem gerçekleştiğinde sizi uyarıyor. Bir diğer güzel Snoop özelliği ise uygulamanın Etiket İsimlendirme özelliği, ziyaretçilerinizi etiketlemenizi sağlıyor. Bu sayede diyelim ne zaman tanıdığınız bir arkadaşınız sitenizi ziyaret etse, bundan haberiniz olacak.

4. Yahoo! Web Analytics

Yahoo! Web Analytics

Yahoo! Web Analytics, Yahoo!'nun pazarın hakimi Google Analytics'e bir cevabı niteliğinde. Daha çok kurumlara yönelik bir uygulama olan bu gelişmiş üçüncü parti çözüm, özellikle çoklu kullanıcı grupları için analiz verisine erişimi kolaylaştırıyor. Gelişmiş bir web analiz aracından beklediğiniz her şeye sahip olan uygulamanın güzel görünümlü grafikleri, özel tasarlanmış (ve yazdırılabilir) raporları ve gerçek zamanlı veri izleme özellikleri bulunuyor.

5. BBClone

BBClone Demosu

Eğer üçüncü parti çözümlere dayanmayan, basit, sunucu tabanlı bir web uygulaması arıyorsanız, o zaman BBClone uygulamasına bir göz atın. PHP tabanlı bir sunucu uygulaması olan BBClone, ziyaretçi verileri ve website trafiğinize yönelik pek çok detaylı bilgiyi veriyor. Uygulama, aralarında İngilizce, Çince, Almanca ve Türkçe'nin de bulunduğu 32 adet dili destekliyor. Uygulama, Drupal, WordPress ve Textpattern gibi popüler yayımlama platformları ile kolayca bütünleşebiliyor. Uygulama sunucuların log dosyalarındaki veriyi işlediğinden, herhangi bir sunucu tabanlı veritabanı kullanmanızı gerektirmiyor.

6. Woopra

Woopra

Woopra Java ile yazılmış ücretsiz bir Web analiz uygulaması. Veri analizi ve önizlemesi için geliştirilmiş bir masaüstü uygulaması ile web sitenizin istatistiklerini kontrol edebileceğiniz bir web platformundan oluşan iki bölümü bulunuyor. Woopra'nın gelişmiş bir kullanıcı arabirimi ve sezgisel yönetim sistemi birden fazla site ve alan adı üzerinde uygulamayı çalıştırabilmenizi sağlıyor. Uygulamanın "sohbet" özelliği sayesinde sitenizi ziyaret eden kullanıcılar ile bireysel olarak sohbet edebilmenizi bile sağlıyor. Şimdilik beta aşamasında olan Woopra'yı kullanabilmek için özel beta kayıt davetiyesine sahip olmanız gerekiyor.

7. JAWStats

JAWStats

JAWStats sunucu tabanlı bir Web analiz uygulaması olup popüler AWStats ile birlikte çalışıyor (aslında eğer paylaşımlı bir sunucu planını kullanıyoranız, AWStats muhtemelen sisteminizde kuruludur). JAWStats AWStats'ın yapabildiklerini iki şeyi daha ekliyor. Sunucu kaynak kullanımını azaltarak performansı arttırıyor ve kullanıcı arabirimini biraz iyileştiriyor. Bunu söylemiş olmakla birlikte eğer AWStats kullanıyorsanız ve ondan memnunsanız, JAWStats'ın öyle aman aman fazla bir yenilik getirmediğini de göz önünde bulundurun.

8. 4Q

Web analizinin büyük bir bölümü rakamsal verilerin işlenmesine dayalır. İşlenmemiş rakamlar, hikayenin sadece bir kısmını oluşturur ve gerçek kullanıcılar ile iletişime dayalı bir analiz raporu oluşturmanız gerektiğinde genellikle kullanışlıdır. 4Q geliştiricisi Avinash Kaushik, bu durumu çok güzel özetlemiş aslında: "Web analizi 'Ne' sorusunun yanıtını vermede iyi ancak 'Neden' sorusunu yanıtlarken biraz zayıf kalıyor". 4Q basit bir anket uygulaması olup bilinen nümerik web analiz verisini kullanıcıların geri bildirimleri ile birlikte işliyor. 4Q'nin ne kadar kolay kurulabileceğine yönelik bir YouTube Videosu da mevcut.

9. MochiBot

MochiBot

MochiBot ücretsiz bir Web analiz/izleme aracı olup özellikle Flash içerikli websitelerinde uzmanlaşmış. MochiBot ile sizin Flash içeriğinizi kimlerin paylaşıp paylaşmadığını, içeriğinizin kaç kez görüntülendiğini ve Flash içeriğinizin gizlilik ve içerik hırsızlığını önlemek için o an nerede olduğunu izleyebiliyorsunuz. MochiBot'u kurmak gerçekten kolay, sadece birkaç satırlık ActionScript kodunu izlemek istediğiniz FLA dosyasının içerisine yerleştiriyorsunuz.

10. Grape Web Statistics

Grape Web Statistics

Grape Web Statistics basit ve açık kaynaklı bir kullanıcı olup özellikle web geliştiricileri arasındaki popülerliğini arttırıyor. Basit ve kullanışlı bir kullanıcı arabirimi olan bu uygulamanın Eklenti API'si sayesinde kurulumunuzu özelleştirmeniz ve geliştirmeniz de mümkün. Arkaplan işleri için PHP kullanan bu uygulama, PHP çalıştırabilen her sunucuda çalışıyor.

Tartışalım
Hangi Web analiz yazılımını kullanıyorsunuz ve neden? Yukarıdaki uygulamalardan herhangi birini denediniz mi? Yorumlarınızla deneyimlerinizi paylaşın.

İlginizi çekebilecek diğer yazılar

Wikipedia üzerinde Web analizinin tanımı'nı okuyun.
Web analiz konusu ile mi ilgileniyorsunuz? Web Analiz Derneği'ne bir göz atın.
Mashable üzerinde yayımlanan Woopra incelemesi yazısını okuyun. Yazı ayrıca bir video röportajını da içeriyor.
Piwik incelemesini okuyarak bu açık kaynaklı platform hakkında daha detaylı bilgi alın.

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