bildirgec.org - depresif visne - beğendikleri

Farklı jQuery uygulamaları

depresif visne — Tue, 02 Feb 2010 15:04:00 GMT

Artık jQuery'siz günümüz olmuyor. Web tasarımında hayatın o kadar içine girdi ki her sitede, her uygulamada jQuery uygulamaları bulunmakta. İşte birbirinden farklı yeni jQuery uygulamaları;

Slidedeck - Interactive Presentation Slider

Slidedeck, ücretsiz olarak sunulan jQuery slider uygulamasıdır. Projelerinizi, web sayfanızdaki önemli makale veya haberleri Slidedeck ile yayınlayabilirsiniz.

Visual Lightbox

Visual Lightbox, jQuery ile yapılan resimler için hazırlanmış bir tooltip uygulamasıdır. Sayfanızda bulunan resimleri ziyaretçi tıklandığında anında bir tooltip açılarak resmin orjinal halini görebilir.

DropCaptions

Resimlerinizin altına notlar eklemek isteyenler için hazırlanmış çok kullanışlı bir jQuery tooltip uygulaması. Resimlerin üzerine gelindiğinde aşağı sarkan kutuya resim hakkında açıklama yapabilirsiniz.

TextMorph

TextMorph, herhangi bir yazı metnini farklı şekiller ile ekranda görüntüleyebilir. Kare, daire, dikdörtgen vb. gibi birçok şekli elde etmek mümkün.

Timeago

Facebook'ta "x kişisi 3 saat 5 dk. önce şunu yaptı" şeklinde bulunan uygulamanın aynısı. Bu sayede web sitenizde kişilerin neyi ne kadar zaman önce yaptığını rahatlıkla hesaplayabilirsiniz.

AutoSuggest

AutoSuggest, gelişmir bir jQuery arama uygulamasıdır. Tamamlama özelliği ve farklı birkaç kelimeyi seçme özelliği bulunmakta.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynak ; jquery.com

Bu yazı depresif visne 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

jQuery ile Yapılan Animasyon Uygulamaları

depresif visne — Sun, 31 Jan 2010 11:22:00 GMT

jQuery artık o kadar ilerledi ki animasyonlar bile yapılabiliyor. Genelde flash ile gördüğümüz animasyonları gelecekte jQuery ile yapıldıklarını görmemiz mümkün. İşte birbirinden farklı jQuery ile yapılan inanılmaz animasyon örnekleri;

Building an Animated Cartoon Robot with jQuery - Demo
(jQuery ile Animasyon Robot yapma)

5 katman hazırlanarak yapılarak hazırlanan çok hoş bir jQuery uygulaması. Kısa olmasına rağmen ileride benzer çalışmaları geliştirilerek yapılabilir.

Crafting an Animated Postcard With jQuery - Demo
(jQuery ile Animasyon Karpostal Hazırlama)

Flash animasyonların yerini ileride jQuery ile yapılan animasyonların alabileceğinin en büyük kanıtlarından biri. Çok kullanışlı bir jQuery uygulaması.

Animate Curtains Opening with jQuery - Demo
(jQuery ile Animasyonlu perde açılışı)

Sinema, video içerikli siteler için birebir uygulama.Uygulamayı aynen web sayfanıza koyabileceğiniz gibi benzerini de yaratmakta özgürsünüz.

jQuery Solar System - Demo
(jQuery ile güneş sistemi)

Güneş sistemi hoş bir şekilde jQuery 3D animasyonu haline gelmiş. Ayrıca mouse hareketlerinize göre hareket ediyor.

Animated Header Using jQuery - Demo
(jQuery ile Animasyonlu Arka Plan Yapımı)

css ve jQuery ile harika bir jQuery uygulaması. Hareketli arka planlar gelecekte tutabilir.

CSS Transitions via jQuery Animations - Demo
(jQuery animasyonlar üzerinden CSS geçişeri)

jQuery Animations: A 7-Step Program - Demo

How to Make an Impressive Animated Landscape Header with jQuery - Demo
(Nasıl jQuery ile etkileyici animasyon yapılır)

Çizgi film temalı çok hoş bir jQuery uygulaması. Fakat sadece bir efekt bulunmakta.

Multiple Animations With jQuery - Demo
(jQuery ile Multi animasyon)

Çok hoş bir jQuery animasyon harikası. Uzun metrajlı çizgi filmler bile oluşturulabilir.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynak ; jquery.wisdomplug

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

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

öğrenilmesi gereken 15 css hilesi

depresif visne — Tue, 27 Jan 2009 09:25:00 GMT

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

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

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

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

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

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

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

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

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

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

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

W3 Padding Properties

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

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

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

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

SitePoint - Using text-indent

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

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

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

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

Double Margin Causes and Fixes

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

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

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

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

Fighting spam with CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Using the min height fast hack

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

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

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

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

HTML Dizisi
Başlık Metni

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

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

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

Kaynak: ThemeForest

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

Bu yazı depresif visne 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

15 Photoshop ürün reklamı tasarımı dersi

depresif visne — Mon, 04 Aug 2008 20:58:00 GMT

15 Photoshop Tutorials for Creating Product Advertisements

Photoshop'la daha çekici ve dikkat çeken reklamlar tasarlamak için size yardım edecek olan, 15 özel dersin bir listesi aşağıda sunulmuştur.

1- Profesyonel bir dizüstü bilgisayar (laptop) reklamı tasarlamak

2- Cep Telefonu Reklamı tasarlamak

3- içecek reklamı tasarlamak

4- Parfüm reklamı tasarlamak

5- Gösterişli bir moda reklamını tasarlamak

Derslerin tamamını görmek için buraya tıklayabilirsiniz.

Bu yazı depresif visne 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

font konferansı: fontlar kişileştirilirse

depresif visne — Tue, 05 Aug 2008 20:53:00 GMT

fontlar internet ve bilgisayar kullanıcıları için ayrı bir öneme sahip. gün geçtikçe karşımıza birbirinden farklı onlarca yeni font çıkarken bu videoda olaya farklı bir açıdan yaklaşılmış.

font konferansında arial black :)

ve şimdiye kadar sıklıkla karşımıza çıkan ve de yer yer kullandığımız fontlar kişileştirilmiş. sonuç olarak, fontlarla haşır neşir olanlar veya fontlara ilgi duyanların mutlaka izlemelisi gereken, "font konferansı" adında eğlenceli ve bir o kadar da yaratıcı olan bir görüntü ortaya çıkmış.

font konferansında century gohtic :)

("comic sans" i hiç böyle düşünmemiştim.)

ek olarak bilgisayarınızdaki tüm fontları hemen buradan görebilirsiniz.

Bu yazı depresif visne 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 web sitesi gözetleme (monitoring) araçları

depresif visne — Tue, 22 Jul 2008 11:21:00 GMT

Bir web sitesi sahibinin başına gelebilecek en kötü şeylerden birisi de, birkaç dakikalığına (hattâ saniyeliğine de olsa) web sitesinin barındırma (hosting) problemleri yüzünden erişilemez hâle gelmesidir. Özellikle ülkemizde, altyapı yetersizliği ve profesyonel olarak hosting işi yapanların azlığı nedeniyle bu tür durumlara çok sık rastlamaktayız. sinir bozucu olan bu gibi durumların önüne her ne kadar geçebilmek imkânsızsa da, internet üzerinde yer alan birkaç araçla hiç değilse sitenizin ne zamanlar erişilemez durumda olduğunu öğrenebiliyorsunuz. İşte bu araçlardan bazıları:

mon.itor.us

Web sitesi gözetleme işini hakkıyla yapan ve diğerleri arasında gelimiş özellikleriyle öne çıkan bu mon.itor.us, sadece HTTP trafiğini izlemekle kalmıyor, bunun yanında POP, HTTPS, TCP, FTP gibi protokolleri de monitörize edebiliyor.

Genel özellikleri:

Birden fazla web sitesini aynı hesap altında gözetleyebilme imkânı,
HTTP, HTTPS, FTP, SIP, TCP, UDP, IMAP, SMTP, POP3, PING, DNS gibi protokolleri destekleme,
Düz ya da grafiksel arabirim içerisinde sonuçları gösterebilme,
Herhangi bir erişim problemi hâlinde hataları 2-3 dakika gecikmeli olarak e-posta adresinize gönderebilme,
Almanya, Amerika gibi konumlardan sitenize erişip ping ölçümü yapabilme,
Haftalık özet ve günlük uptime oranını verebilme,
Birden fazla adrese hata mesajları gönderebilme,
Yapılacak listesi, tavsiye vs. gibi çeşitli modüller,
ve dahası...

mon.itor.us'tan görüntüler

Sistemin gözetleme aralığı 5 dk olup SMS uyarı sistemi bulunmamaktadır. Kayıtları günlük olarak tutmakta ve gün sonunda silmektedir.

Bu servisin olumsuz yönlerinden birisi, değişik konumlardan gözetleme yapmasına rağmen erişim süresinin (ms) yüksek olmasıdır. Ayrıca kontrol zaman aralığının yüksek olması ve tutarlı olmaması da bazı durumlarda dezavantaj sağlayabiliyor.

Hyperspin

Türkçe desteği de bulunan bu servis, İngilizce bilmeyen site sahiplerinin derdine derman olacak niteliktedir.

Servis, "kesinti raporu" ve "uptime raporu" adı altındaki kısımlardan sitenize ne zamanlar ulaşılamadığı ve sitenizin ne kadar süre erişilebilir olduğunu gözlemleyebilirsiniz. mon.itor.us'un aksine kayıtları tutan ve aylık ya da yıllık dilimlerde istediğiniz zaman erişebileceğiniz bu servis, asp, php gibi dillerde yazılmış sayfalar için de destek sunuyor ve konuyu şöyle izâh ediyor:

Bazı durumlarda web sunucu düzgün olarak çalışırken script motoru arıza verebilmektedir. Sadece web sunucu portunu kontrol altında tutuyorsanız eğer, betik hatalarından haberdar olamazsınız

Genel özellikleri:

İstediğiniz zaman aralığındaki kayıtlara erişebilme olanağı,
1 dakikadan 60 dakikaya kadar kontrol zaman aralığı.
Dinamik içerikli web sitelerinin erişimini kontrol altında tutabilme,
Özel ya da korumalı veritabanı sunucularını kontrol edebilme,
Şifre korumalı web sitelerini gözetleyebilme,
"Hızlı test" gibi araçlarla çeşitli kategorilerde web sitenizi testlere tabi tutabilme imkanı,
Birden fazla konumdan sitenizi gözlemleyebilme olanağı.

Hyperspin'den bir görüntü

Servisi yeteri kadar test edemedim; fakat ilk izlenimlerim olumlu yönde. Zira başka ücretsiz servislerde olmayan pek çok özelliğe sahip olması, türkçe desteğinin bulunması ve en önemlisi de istediğiniz zamana ait verileri ekrana yazdırabilme olanağı bu servisi diğerleri arasından açık ara önlere çıkarıyor.

Service Uptime

Service Uptime isimli bir diğer web sitesi gözetleme servisi, ücretisiz sürümü pek fazla alternatif sunmasa da kullanıcı arayüzü oldukça güzel. Günlük, haftalık, aylık ya da yıllık raporları dairesel grafiklerle anlaşılır bir şekilde göstermesi, onu kayda değer kılan unsurların en başında geliyor.

Genel Özellikleri:

10 gözetleme konumu,
Tüm portları gözetleme imkanı,
Hiçbir zaman silinmeyen raporlar,
Günlük, haftalık, aylık ya da yıllık erişim raporları,
Ziyaretçilere açık erişilebilirlik bilgileri,
SMS ile bildirim olanağı,
Web sitenize "uptime" oranını bildiren tuş koyabilme özelliği,
Raporları CSV formatında verebilme imkânı,
Ulusal bölge zamanını ayarlayabilme özelliği.

Service Uptime'dan bir görüntü

Servisin dikkate değer taraflarından birisi, yukarıda da belirttiğim üzere, göze hitap etmesi. Anlaşılır ve kullanışlı arabirimi sayesinde tercih sebebi olabilir; fakat 30 dakikada bir kontrol etmesi (ki bu da 29 dakikalık bir kesinti olduğunda bundan haberimiz olmayacağı anlamına geliyor), bu servisin kullanılabilirliğini düşüren unsurlar arasında geliyor.

siteuptime

Bir diğer servisimiz olan SiteUptime, 1 site gözetleme olanağı, 30 ya da 60 dakikalık kontrol aralığı ve raporlama desteği sunuyor. Uzun kontrol aralığı gibi bazı dezavantajlarını saymazsak, SiteUptime'ın öne çıkan özelliklerini şöyle sıralayabiliriz:

4 farklı gözetim konumu,
E-posta uyarıları,
Aylık rapor,
HTTP, POP3, SMTP, FTP desteği,
Grafiksel izleme,
Ziyaretçilere açık uptime oranı bilgisi.

Siteuptime'dan bir görüntü

Diğer servislere nazaran gözle görülür derecede önemli bir ek servisi bulunmayan SiteUptime, bir "demo" sayfası sunuyor. Bu sayfaya buradan erişebilirsiniz. Servisin bir artısı, belki diğerlerine göre daha kullanıcı dostu bir arayüze sahip olmasıdır.

internetseer

internetseer, diğerleri kadar kullanıcı dostu bir arayüze sahip olmasa da, basit şekilde "site gözetleme" işi yapıyor. Aslına bakılırsa, internetseer'ı bu listeye alıp almamakta kararsız kaldım. En sonunda, sadelik isteyen kullanıcıların tercih sebebi olabileceği için listeye dahil ettim.

Genel özellikleri:

Günde 24 kez kontrol,
HTTP protokolüne destek,
Haftalık raporlar,
İstenildiği kadar kişiye uyarı gönderimi,
Yanlış alarm koruması.

internetseer'dan bir görüntü

Söylediğim gibi, bu servisin diğerlerine göre pek fazla bir artısı yok. Hatta diğerlerinin yanında oldukça sönük kalıyor; fakat "Sadece e-posta adresime günlük uyarılar gelsin." diye düşünenler için ideal olabilir.

Site 24x7

Daha kolay, daha hızlı ve daha etkili sloganlarıyla yola çıkan Site 24x7, ms cinsinden günlük ping süresini gösteriyor ve anlaşılabilir grafiklerle istatistikleri kullanıcısına sunuyor. En büyük özelliği, 1 dakikadan 1 güne kadar çeşitli aralıklarda kontrol imkânı sunması. Zira 1 dakika gibi kısa bir sürede kontrol yapan başka bir ücretsiz servis neredeyse yok gibi.

Genel özellikleri:

1 dakikadan 1 güne kadar kontrol zamanı aralığı,
Zamanaşımı süresini belirleyebilme olanağı,
Web sitesinin içeriğinin değişip değişmediğinin kontrol edilebilmesi
Anahtar kelimelerin değişikliğine göre uyarı verebilmesi
Uyarıların ne zamandan itibaren (ilk, ikinci ya da üçünc erişilememede vs.) gönderileceği gibi özelliklerinin bulunması.

Site 24x7'den bir görüntü

Aslına bakılırsa, diğerlerinin içinde en çok özellik sunan servis Site 24x7 olarak görünüyor. Kolay ve anlaşılabilir arayüzü de onun kullanılabilirlik oranını yükseltiyor. Farklı konumlardan da kontrol olanağı sağlaysaydı, en popüler monitör aracı olabilirmişti. Ayrıca, servisi sağlayan firmanın diğer servisleri de kayda değer olarak görünüyor. Bakmakta fayda olacaktır.

Diğer araçlar

host tracker

Değişik konumlardan web sitenize olan erişimin ms cinsinden hızını ölçmenize sağlayan bir web aracı olan Host Tracker, gireceğiniz bir e-posta adresi aracılığıyla da gerektiği zamanlarda uyarıları tarafınıza gönderebiliyor.

host tracker'dan bir görüntü

Apical Soft Radar Website Monitor

Radar Website Monitor, Bilgisayarınıza kurup kendi evinizden web sitesi erişim kontrolü yapmanızı sağlayan ve son derece kullanıcı dostu yapıya sahip bir programdır.

Radar Website Monitor'dan bir görüntü

1 saniyeden başlamak üzere istediğiniz aralıklarda kontrol edebilir ve sitenizin ping süresini ölçebilirsiniz. Belki bilgisayarı devamlı açık olmayan kullanıcılar için pek bir anlam ifade etmeyecektir; fakat sunucu (server) sahipleri için paha biçilemez bir öneme sahip olacaktır.

2.3 MB boyutundaki programı buradan indirip bilgisayarınızak kurabilirsiniz.

NOT: Bahsi geçen bu servislerin yazmış oduğum özellikleri ücretsiz sürümleri için geçerlidir. Çoğu servisin ücretli sürümü de vardır ve özellik bakımından farklılık gösterebilmektedirler. Yorumlar, şahsî nitelik taşıyabilir; bu da bazı servisleri uzun süre kullanıp bazılarını kısa süre kullanmamdan ileri gelmektedir.

Bu yazı depresif visne 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

İlham Alınacak 27 Rus Sitesi

depresif visne — Mon, 07 Jul 2008 11:13:00 GMT

Adproject.Ru

Şurada 27 adet kaliteli rus sitesi tanıtılmış. İçlerinde gerçekten hayranlık uyandıracak çalışmalar var. Css ve Flash ile nelerin yapılabileceğini gösteren güzel bir derleme...

Bu yazı depresif visne 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

703 Adet .Gif

depresif visne — Thu, 03 Jul 2008 17:20:00 GMT

Web tasarimcilari .gif uzantili, hareketli resimleri cogunlukla kullanir. Iste bu kaynakta 703 adet button olarakta kullanilabilecek resim sergilenmis.

Bu yazı depresif visne 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 mükemmel fotoğraf arşivi

depresif visne — Thu, 05 Jun 2008 11:15:00 GMT

öncelikle bu bildiriyi paylaşmaktan gurur duyuyorum çünkü bildiklerimizi ve sahip olduklarımızı paylaştığımız bu güzel aileye bu bildiri sayesinde sizlere tatlı bir jest yaptığımı düşünüyorum. detaylı obje-doğa-insan fotoğrafları peşinde koşuyor ya da tasarımla uğraşıp efil efil kaliteli fotoğraf arayorsanız iste sizin için eşsiz bir kaynak.buradaki fotoğrafları çekmek ya da edinmek için ne kadar zaman ve para harcayacağınızı hesaplamak zor olurdu benim için. bu yüzden sanırım tamamına sahip olduğum bu arşivi sizlerdeğerli dostlarımla paylaşmayı uygun gördüm. arşive bir an önce uğramanızı tavsiye ediyorum ve bir kaç değerli örneği burada sunuyorum! ancak buradaki örnekler arasında en profesyonel çalışma olan ve paylaşmaktan dahi kıskandığım* ilk sıradaki çalışmaya kesinlikle sahip olmanızı öneriyorum!

*kurumsal kimlik, marka sunumları için eşsiz çalışma

elbise,ayakkabı aksesuar

panoromik yeşi doğa fotoğrafları

tamamı burada

Bu yazı depresif visne 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

40 Ücretsiz Tema Kaynağı

depresif visne — Wed, 02 Jul 2008 13:00:00 GMT

GoFreeServe, bizim için 40 ücretsiz web sayfası tema kaynağını sıralamış.

İlk sırada Simavera Website Templates var: Birbirinden ilginç olmakla birlikte fazlaca iddialı web sayfası temaları içeriyor.

Sonra gelen OpenDesigns, içerdiği 1100 farklı CSS teması ile neredeyse eşsiz bir kaynak. Temalara hergün yenileri ekleniyor.

Dotemplate: İçerdiği temalardan istediğiniz birini seçebileceğiniz, düzenleyebileceğiniz ve indirebileceğiniz bir kaynak.

Bu yazı depresif visne 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