Serpito » Web kaynakları

Web Tasarım Girişimlerinde PSDUP örneği

Atilla Akoğlu — Tue, 12 Jul 2011 10:36:51 +0000

Yaklaşık 3,5 yıl önce serpito.com‘u açtığımda türk internetinde sağlam kaynak bulmak neredeyse imkansızdı. bildirgec ve ondan beslenen böcekler, türkçe kaynak tanımını oluşturuyordu. Son zamanlarda tanıtılmaya layık ve içeriğin kalitesi bakımından benzersiz olduğunu düşündüğüm psdup.com‘u kayıt altına almak istedim.
Birçok gönüllü tasarımcı ve coder genç arkadaşın içerik ürettiği ve demolarıyla fark yaratması, açıkcası beni çok sevindirdi. Umarım bu çalışma, yerli bir themeforest girişimi doğurur.

www.psdup.com

Css Admin Panel

sword fish — Fri, 09 Jul 2010 14:32:33 +0000

Web sitelerimizn yönetim bölümünde kullanılabilecek, zengin içerikli bir admin panel.

Admin paneli zip şeklinde indirmek için tıklayınız.

Daha Fazla Admin template için

PHP: Domain Sorgulama Uygulaması (Whois Search)

Atilla Akoğlu — Thu, 25 Feb 2010 13:17:33 +0000

Yeni bir proje için en temel öğe uygun domain bulabilmektir. Bu uygulamamızda yerel sunucunuzda dilediğiniz domainin whois kayıtlarını sorgulama olayını inceleyeceğiz.

Bu uygulama için class.whois.php PHP sınıfını kullanıyoruz.

index.php







< <?=$domain?> > Domain arama




Serpito Domain Whois Sorgulama aracı



 Örnek: serpito.com , google.com

ValidDomain($domain.'.'.$tld) ){
return 'Sorry, the domain is not valid or not supported.';
}

if( $whois->Lookup($domain.'.'.$tld) )
{
return $whois->GetData(1);
}else{
return 'Sorry, an error occurred.';
}
}

$domain = trim($_REQUEST['domain']);

$dot = strpos($domain, '.');
$sld = substr($domain, 0, $dot);
$tld = substr($domain, $dot+1);

$whois = getwhois($sld, $tld);
?>

";
echo $whois;
echo "

"; ?>

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Mootools Slider Buton

Atilla Akoğlu — Mon, 15 Feb 2010 21:58:17 +0000

Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.

İlk olarak javascript kodlarımızdan başlayalım

<br />
	&lt;script type="text/javascript" src="mootools-1.js"&gt;&lt;/script&gt;<br />
	&lt;script type="text/javascript"&gt;<br />
		window.addEvent('domready',function() {<br />
			$$('.slidebttn').each(function(btn) {<br />
				var prev = btn.getPrevious('a').set('tween',{ duration: 500 });<br />
				var span = prev.getElement('span');<br />
				btn.addEvents({<br />
					mouseenter: function(e) {<br />
						btn.addClass('a');<br />
						prev.tween('width',225);<br />
						span.fade('in');<br />
					},<br />
					mouseleave:function(e) {<br />
						btn.removeClass('button_c');<br />
						prev.tween('width',70);<br />
						span.fade('out');<br />
					}<br />
				});<br />
			});<br />
		});<br />
	&lt;/script&gt;<br />

Html Kodlarımız

<br />
&lt;div id="content"&gt;<br />
    &lt;div class="button_wrap"&gt;<br />
        &lt;a class="button_aRight" id="button_aLeft"&gt;&lt;span style="visibility: hidden; opacity: 0;"&gt;Facebook'a giriş yapma&lt;/span&gt;&lt;/a&gt;<br />
        &lt;a class="button_bRight slidebttn" id="button_bRight"&gt;Facabook&lt;/a&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class="button_wrap"&gt;<br />
        &lt;a class="button_aRight" id="button_aLeft"&gt;&lt;span style="visibility: hidden; opacity: 0;"&gt;Twitter'a giriş yapma&lt;/span&gt;&lt;/a&gt;<br />
        &lt;a class="button_bRight slidebttn" id="button_bRight"&gt;Twitter&lt;/a&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

PHP:Jquery: Scroll Down Auto Load Data (Sayfayı aşağı kaydırınca otomatik veri yükleme)

Atilla Akoğlu — Mon, 15 Feb 2010 16:13:41 +0000

Bu uygulamada bazı web sitelerinde görülen sayfa altına scroll edilince yeni verilerin Ajax ile yüklenme olayını inceleyeceğiz. Örnek site için sortfolio. Bu uygulama ile sayfa hareketine göre verilerin daha düzenli ve verimli kullanılmasını sağlıyoruz. Tabi ki sunucu performansından büyük tasarruf ediyoruz.

Bu uygulama demosu için de daha önce kullandığım mysql.php database class yapısını kullandım. En kısa zamanda bu class ‘ı da detaylıca açıklayacağım.
Uygulamamız için gereken kodlara geçelim:

index.php kodları



 "get")
{
?>



Serpito.Com - Scroll Load Demo

Serpito.com
Bu demo PHP:Jquery: Scroll Down Auto Load Data icin hazirlanmistir.


query("SELECT ID,post_title,post_name FROM wp_posts WHERE post_status='publish' ORDER BY ID DESC LIMIT 25");
while($row=$dba->fetch_array($sql))
{
$msgID= $row['ID'];
$msg= $row['post_title'];
$link=$row['post_name'];
?>





close();
?>

scroll.php kodları


query("SELECT * FROM wp_posts WHERE ID<'$last_msg_id' and post_status='publish' ORDER BY ID DESC LIMIT 5");
$last_msg_id="";
while($row=$dba->fetch_array($sql))
{
$msgID= $row['ID'];
$link=$row['post_name'];
$msg= $row['post_title'];
?>



close();
?>

PHP: Dinamik URL Ayraç Fonksiyonu (URL with Regular Expressions)

Atilla Akoğlu — Mon, 15 Feb 2010 11:06:45 +0000

Text bazlı içeriklerde yer alan URL bağlantılarını tıklanabilir hale getirmek için basit bir PHP fonksiyonu işimizi görür.


\\1', $text);
$text = eregi_replace('(((f|ht){1}tps://)[-a-zA-Z0-9@:%_\+.~#?&amp;amp;//=]+)',
'\\1', $text);
$text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&amp;amp;//=]+)',
'\\1\\2', $text);
$text = eregi_replace('([_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})',
'\\1', $text);
return $text;
}
?>

Bu fonksiyonun kullanımı da aşağıdaki gibidir.

Çalışan kodun çıktısı şu şekilde olur:

serpito php dersleri,ajax ve jquery uygulamaları
http://tinyurl.com/yeanjxm

PHP – TinyURL otomatik url kısaltma fonksiyonu

Atilla Akoğlu — Thu, 11 Feb 2010 16:36:17 +0000

Fonksiyon özellikleri:

API Url: http://tinyurl.com/api-create.php
Gerekli parametre: url
Örnek:
gönderilen sorgu- http://tinyurl.com/api-create.php?url=http://www.serpito.com/php-tinyurl-otomaik-url-kisaltma/
Dönen cevap- http://tinyurl.com/yeanjxm

Fonsiyon kodları

[code]
function TinyURL($u){
return file_get_contents('http://tinyurl.com/api-create.php?url='.$u);
}
?>
[/code]

[code]

$url = 'http://www.serpito.com/php-tinyurl-otomaik-url-kisaltma/';
$tiny = TinyURL($url);
echo $url.'"bağlantısının kısaltılmış hali : "'.$tiny;
die();
?>
[/code]

Örnek kodları çalıştırınca kısaltılmış url http://tinyurl.com/yeanjxm

Curvy Corners ile yuvarlak köşeler

Atilla Akoğlu — Thu, 11 Feb 2010 13:19:33 +0000

Her ne kadar yeni nesil tarayıcılarda CSS ile pratik bir şekilde dilediğimiz ölçülerde yuvarlak köşe oluşturabilsek de, microsoft internet explorer tarayıcıları henüz bu özelliği desteklememektedir.

Mozilla Firefox, Google Chrome, Safari gibi popüler web tarayıcı için aşağıdaki CSS kodları istenilen yuvarlak köşelere uyum gösteriyor.

[sourcecode lang="php">

[/sourcecode]

Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda kusursuz çalışan yuvarlak köşeler yapabilirsiniz.

Öncelikle CurvyCorners.js dosyasını indiriyoruz.

Yeni bir index.html dosyası oluşturup aşağıdaki kodları içine yapıştırın.

[sourcecode lang="php"]

Curvy Corners by Serpito

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Reading this stuff will rot your mind. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Bu sayfa curvyCorners ile yuvarlak köşeler için hazırlanan demoyu inceliyorsunuz.

[sourcecode]

Uygulamanın demosu için tıklayınız.
Curvy Corners dosyalarının tamamını indirmek için tıklayınız.