Serpito » CSS http://www.serpito.com Güncel Teknoloji ve Yazılım Blogu Fri, 03 Feb 2012 11:44:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Web Tasarım Girişimlerinde PSDUP örneği http://www.serpito.com/web-tasarim-girisimlerinde-psdup-ornegi/ http://www.serpito.com/web-tasarim-girisimlerinde-psdup-ornegi/#comments Tue, 12 Jul 2011 10:36:51 +0000 Atilla Akoğlu http://www.serpito.com/?p=1405 read more »]]> 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

]]> http://www.serpito.com/web-tasarim-girisimlerinde-psdup-ornegi/feed/ 1 Web Öge Seti : yedOs http://www.serpito.com/web-oge-seti-yedos/ http://www.serpito.com/web-oge-seti-yedos/#comments Mon, 09 Aug 2010 14:16:15 +0000 yedincisenol http://www.serpito.com/?p=1181 read more »]]>

Önizle - İndir

yedincisenol oge seti kelimelerinin kısaltması olarak yedOs ismini verdiğim öge seti şunlardan oluşmakta;

  1. Butonlar : Yeşil,kırmızı,gri,üçüncül
  2. input,textarea
  3. Sekmeler
  4. Veri tablosu (table)
  5. Form tablosu (table)
  6. Sayfalama
  7. 4 farklı bildirim(tamam,hata,uyarı,bilgi)
  8. fieldset ve legend

Köşeleri yuvarlamak için bir jquery eklentisinden yararlandım (jquery.corner) dolayısıyla yuvarlak köşeler için jquery ve bu eklentiyi projeye dahil etmeniz gerekli. Yuvarlak köşelerin ie’de çalışmadığını da belirteyim.  Setin dosyalarına baktığımızda ise şöyle bir manzara ile karşılaşıyoruz;

  1. 2 css dosyası : yedyen.css,yedOs.css
    Burada eric meyer’in sıfırlama kodları ve benim sıkça kullandığım sınıflar mevcut
  2. 3 js dosyası : jquery.js,jquery.corner.js ve yedOs.js
    Buradaki yedOs.js dosyasında sekmelere ait js kodları mevcut
  3. 3 imaj dosyası
  4. Kaynak : Tasarım (png) ve sprite teknigi ile oluşan .png dosyaları

Set siyah zemin üzerinde güzel görünüyor. Biraz uğraşıp diğer renkler de de güzel görünmesini sağlayabilirsiniz. Kodlar zaten açık ve imaj kaynakları da mevcut.

Böylece serpito.com’da ilk tasarım konulu yazımı yazmış oldum. Umarım işinize yarar.

Önizle - İndir

]]> http://www.serpito.com/web-oge-seti-yedos/feed/ 1 Css Admin Panel http://www.serpito.com/css-admin-panel/ http://www.serpito.com/css-admin-panel/#comments Fri, 09 Jul 2010 14:32:33 +0000 sword fish http://www.serpito.com/?p=1162
Css Admin Panel


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.

]]> http://www.serpito.com/css-admin-panel/feed/ 10 Tinymce Yazı Editörü (HTML Text Editor) http://www.serpito.com/tinymce-yazi-editoru/ http://www.serpito.com/tinymce-yazi-editoru/#comments Wed, 26 May 2010 12:10:23 +0000 sword fish http://www.serpito.com/?p=1101 read more »]]>

Web sitelerimizde zengin yazı editörü kullanmak isteyebiliriz. Örneğin bir ürünümüzü veri tabanına girerken düz yazıdan ziyade linkler, stiller uygulamak isteyebiliriz. Bu gibi durumlarda tinymce yazı editörünü tam bizim isteğimize göre. Tinymce yazı editörünü yönetim panellerinde ürün özellikleri, hakkımızda vb yerlerde kullanmaktayım. En etkin olarak haber girişi işi için bire bir. Çünkü paragrafları belirtmek, embed ile video gömme, yazı içeriğine etkin bir şekilde link ekleme, bold ve italic gibi stilleri uygulamak oldukça kolay.

Tek dikkat etmemiz gereken konu css’lerin birbirleri ile uyumu. Css çakışmaları olabiliyor. :d kendimde biliyorum yaşadım çünkü arkadaşlar. Bunun yanı sıra yazılarımızı belli bir yerde imleyerek “devamını gör” gibi bir özelliğimizde yer almaktadır. Bu wordpress’de more olarak yer almaktadır.

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

]]> http://www.serpito.com/tinymce-yazi-editoru/feed/ 4 Jquery Image Mouse Effect http://www.serpito.com/jquery-image-mouse-effect/ http://www.serpito.com/jquery-image-mouse-effect/#comments Wed, 14 Apr 2010 14:21:03 +0000 sword fish http://www.serpito.com/?p=1057 read more »]]> Web sitelerimizde, kişisel bloglarımızda, formlarımızda veya portallarımızda yer alan resimlerimiz açıklamalarını jquery yardımı ile görselleştirebiliriz, daha kullanışlı bir hale getirebiliriz.


Resmimizin üzerine mause ile gelindiginderesimin üst ve alt kısımlarında bölümlerimiz açılıyor ve resim hakkında bilgilerimiz bu bölüm aracılıyığla yayınlamış oluyoruz.
index.html kodlarımız


<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Gumusluoglu.Com</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/mojo.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"></head>
<body>
    <div id="container">
        <div class="bblock">

            <div class="item">
        		<div class="title">Dilmen.Net</div>
        		<img src="images/tf.jpg" alt="Image" />
       			<div class="desc">Aykut Dilmen'ni kişisel fotograf sitesi.</div>
    	    </div>

            <div class="item last">
                <div class="title">Bemtashali.Com</div>
                <img src="images/cc.jpg" alt="Image" />
                <div class="desc">Bemtaş Halı LTD. ŞTİ. resmi web sitesi.</div>
            </div>
		</div>
    </div>
</body>
</html>

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

]]> http://www.serpito.com/jquery-image-mouse-effect/feed/ 2 PHP:AJAX: Fancy Captcha Uygulaması http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/ http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/#comments Mon, 01 Mar 2010 16:20:20 +0000 Atilla Akoğlu http://www.serpito.com/?p=967 read more »]]> Ajax Fancy Catpcha Script

Özellikle formlar aracılığı ile kullanıcılarla etkileşimde olunan durumlarda işlem yapanın gerçek bir kullanıcı mı yoksa otomatik bir bot mu olduğunu kontrol etmek zorunlu olmaktadır. Piyasada bulunan Captcha uygulamalarından en dikkat çekici olanını inceleyelim.

Jquery UI kullanarak gerçekleştirilen bu sistemde basit bir index kullanımı ile aktif hale gelebiliyor. Kodları inceleyelim;

index.html


<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Serpito.com Ajax Captcha Uygulaması</title>
 <script type="text/javascript" src="latest-jquery/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="latest-jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>
 <script type="text/javascript" src="captcha/jquery.captcha.js"></script>
 <link href="captcha/captcha.css" rel="stylesheet" type="text/css" />
 <style type="text/css" media="screen">
 body { background-color: white; }
 </style>
 <script type="text/javascript" charset="utf-8">
 $(function() {
 $(".ajax-fc-container").captcha({
 borderColor: "silver",
 text: "Gerçek bir kullanıcıysan <span>makas</span> i daireye sürükle."
 });
 });
 </script>
</head>
<body>

<div>captcha uygulamasını görebilmek için tarayıcınızın javascript özelliğini açmalısınız!</div>

<!-- ornek icin basit bir form -->
<form action="captcha/captcha.php" method="post" id="myForm">
 <p><input type="text" name="myField1" value=""></p>
 <p><input type="text" name="myField2" value=""></p>
 <p><input type="submit" name="submit" value="formu gönder!"></p>
</form>
<!-- form sonu -->

</body>
</html>

Uygulamanı tüm dosyalarını tek tek buraya kodlamak boşuna vakit kaybı olacaktır. Basit bir şekilde formlara entegre etmenin yolunu paylaştık.

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

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

]]> http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/feed/ 9 Ajax: Fly to Basket (Uçan Sepet) Uygulaması http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/ http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/#comments Mon, 01 Mar 2010 13:29:57 +0000 sword fish http://www.serpito.com/?p=955 read more »]]> E-ticaret sistemlerimizde kullanıcıların ürünleri sepete atıp atmadıklarından emin olmaları çok önemlidir. Kullanıcı emin olmadığı bir işlemde urunu birden fazla sepete ekleye bilir. Bu uygulamamızda ürünü kullanıcı sepete eklediğinde görsel olarak ürünümüzün fotografını sepet olarak belirtmiş olduğumuz bölmeye gönderiyoruz.


Sayfamızda yer alacak olan ürünler için örnek bir kod:


			<div class="product_container">
				<div id="slidingProduct8" class="sliding_product">
					<img src="images/d4abf6cf79b0770a99b01d791595abc3.jpg" width="90" height="120">
					Erkekler ve Diğer Felekatler<br><br>
					12.50
				</div>
				<a href="#" onclick="addToBasket(8);return false"><img src="images/basket.gif"></a>
				<div class="clear"></div>
			</div>

Sepete Ekle(basket.gif) tıklanıldığında “addToBasket(8)” ile ürün id mizi “addProduct.php” dosyamıza yolluyoruz ve gelen productId ye göre select case ile ürün özelliklerini belirleyip “Alışveriş Sepeti” alanına yazdırıyoruz.

addProduct.php kodlarımız


<?
header("Content-Type: text/html; charset=iso-8859-9");
if(!isset($_POST['productId']))exit;
switch($_POST['productId']){

	case "1";
		echo "1|||Ölümcül İklim|||20";
		break;
	case "2";
		echo "2|||Cesur Teklif|||25";
		break;
	case "3";
		echo "3|||Kan Kokusu|||35";
		break;
	case "4";
		echo "4|||Ödünç Yaşam|||10";
		break;
	case "5";
		echo "5|||Alamut Cenneti|||22";
		break;
	case "6";
		echo "6|||Pazartesi Erkeğie|||14";
		break;
	case "7";
		echo "7|||Gilead|||15";
		break;
	case "8";
		echo "8|||Erkekler ve Diğer Felekatler|||12.5";
		break;
}
?>

Sepetimizde yer alan ürünlerin adetlerini ve fiyat toplamını ise “fly-to-basket.js” dosyamız aracılığıyla hesaplıyoruz. “fly-to-basket.js” dosyamızdaki “flyingSpeed” değişkenimiz ile ürüne tıklanıldığında sepete gitme hızını belirlemiş oluyoruz.

Uygulamamızda sadece ürünün sepete gitme işlemini gerçekleştirdik. Sepete gitti anda kullanıcının sepetine veri tabanında eklemek istiyorsak “addProduct.php” dosyamızda case in altına veri tabanımıza ekleyecek olan mysql kodlarımızı yazabiliriz.


	case "7";
		echo "7|||Gilead|||15";
                $q=$dba->query("INSERT INTO sepet(urun_ıd,user_id) VALUES (7,'$_session['user_id']') ");
		break;

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

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

]]> http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/feed/ 6 Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme) http://www.serpito.com/jquery-screenshot/ http://www.serpito.com/jquery-screenshot/#comments Fri, 26 Feb 2010 09:51:31 +0000 sword fish http://www.serpito.com/?p=949 read more »]]> Sistemlerimizde yer alan linkler linklerin açıklamalarını yazı şeklinde yapabildiğimiz gibi Screenshot (Ekran Resmi) şeklindede yapabiliriz. Bu sayede kullanıcıların daha iyi bilgilendirilmesini sağlayabiliriz.Örneğimizde jquery ile screenshot önizlemesi yapıyoruz.


index.html kodlarımız


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Screenshot Önizleme</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<h1>jQuery Screenshot Önizleme</h1>
<p>Aykut Dilmen'in Kişisel Sitesi <a href="http://www.dilmen.net" target="_blank" rel="cssg_screenshot2.jpg" title="Aykut Dilmen">Dilmen.Net</a></p>

<p>Atilla Akoğlu'nun Kişisel Sitesi <a href="http://www.cssglobe.com" target="_blank" rel="cssg_screenshot1.jpg">Serpito.Com</a> </p>
<p>Mülsüm Gümüşlüoğlu'nun Kişisel Sitesi <a href="http://www.gumusluoglu.com" target="_blank" rel="cssg_screenshot.jpg" title="Müslüm Gümüşlüoğlu">Gumusluoglu.Com</a></p>
</body>
</html>

 

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

]]> http://www.serpito.com/jquery-screenshot/feed/ 3 Jquery: CSS: Drop Down Menü http://www.serpito.com/jquery-css-drop-down-menu/ http://www.serpito.com/jquery-css-drop-down-menu/#comments Thu, 25 Feb 2010 13:20:42 +0000 sword fish http://www.serpito.com/?p=939 read more »]]>

Sitelerimizde yer alan açılır menüleri oluşturmak kullanmak kadar kolay ve zevklidir. ul etikeni açıyoruz ve ana menü başlıklarını li etiketi içerisine yazıyoruz.


<ul class="dropdown">
<li><a href="#">Konu Başlıkları</a></li>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>

Yukarıdaki kodlar ile sadece yan yana linklerimiz dizmiş oluyoruz, alt menü eklenmemiş halde. Ana menümüze alt menü eklemeye geldi sıra


        <ul class="dropdown">
        	<li><a href="#">Konu Başlıkları</a>
        		<ul class="sub_menu">
        			 <li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
        		</ul>
        	</li>
        </ul>

Konu başlıkları menüsünün üzerine geldiğimizde CSS, Genel, Javascript, Jquery, MYSQL ve Php menüleri açılıyor.Konu başlıkları menümüze alt menü eklemek için Konu Başlıkları’nın yer aldığı li etiketini kapatmadan önce class’ı sub_menu olan bir ul açıyoruz ve alt menü içeriklerini li etiketleri arasına yazıyoruz, alt menüleri oluşturduktan sonra ul etiketimizi ve Konu Başlıklarının yer aldığı li yi kapatıyoruz. En son olarakda ana ul mizi kapatıyoruz ve alt menülerimiz oluşuyor.
Örneğimizi biraz daha geliştirelim ve iki ana menü altında alt menülerimizi oluşturalım.


        <ul class="dropdown">
        	<li><a href="#">Konu Başlıkları</a>
        		<ul class="sub_menu">
        			 <li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
        		</ul>
        	</li>
        	<li><a href="#">CSS</a>
        		<ul class="sub_menu">
        			<li><a href="http://www.gumusluoglu.com/kategoriler/link-ile-form-submit/">Link İle Form Submit</a></li>
        			<li><a href="http://www.gumusluoglu.com/kategoriler/jquery-text-to-image/">Jquery Text to İmage</a></li>
        			<li><a href="http://www.gumusluoglu.com/kategoriler/css-from-ornegi/">Css From Örneği</a></li><li>
        		</ul>
        	</li>
        </ul>

Konu başlıkları ve CSS ana menüleri altında alt menüler oluşturmuş olduk. Konu Başlıkları ana menüsü altında; CSS, Genel, Javascript, Jquery, MYSQL ve Php, CSS ana menüsü altında ise; Link İle Form Submit, Jquery Text to İmage ve Css Form Örneği alt menülerini oluşturduk.

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

]]> http://www.serpito.com/jquery-css-drop-down-menu/feed/ 2 PHP:Jquery: Image Crop Thumbnail (JCrop) http://www.serpito.com/php-jquery-image-crop-thumbnail/ http://www.serpito.com/php-jquery-image-crop-thumbnail/#comments Wed, 24 Feb 2010 09:41:29 +0000 Atilla Akoğlu http://www.serpito.com/?p=910 read more »]]>

Kullanıcıların profil resimlerini diledikleri ölçüde kesip küçültmelerini sağlayacak bir uygulama geliştirelim. Bir Jquery eklentisi olan Jcrop ile bu işlemi çok pratik bir şekilde yapabiliyoruz.

Uygulama için basit bir index.html dosyası oluşturuyoruz.

index.html


<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />

<script language="Javascript">

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

<div id="outer">
<div>
<div>

<h1>Serpito.com - JCrop Demo</h1>

<!-- This is the image we're attaching Jcrop to -->
<img src="antalya.jpg" id="cropbox" />

<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onSubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="res" name="res" value="antalya.jpg" />

<input type="submit" value="Resimi Kes" />
</form>

</div>
</div>
</div>

</body>

</html>

&nbsp;

&nbsp;

Hidden inputlardan oluşan formun submit edildiğinde veri göndereceği crop.php dosyasını kodlayalım.

crop.php


<?php
error_reporting(E_ERROR);
//print_r($_POST);
$targ_w = $_POST['w']-$_POST['x'];
$targ_h = $_POST['h']-$_POST['y'];

$jpeg_quality = 90;

$src = $_POST['res'];
$s=explode(".",$_POST['res']);
$resim=$s[0]; //resimin ismini aliyoruz

$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, "image/".$resim."_thumb.jpg", $jpeg_quality);

?>]

&amp;nbsp;

crop.php ye gönderilen resim üzerindeki kesim noktalarının kordinatları ve x-y uzunlukları crop.php dosyasında imagecopyresampled fonksiyonu tarafından işleniyor.

Yukarıdaki görselde denediğim uygulamanın sonucunda images dizininde antalya_thumb.jpg resimini aşağıda görebilirsiniz.

php jqery crop thumbnails

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

]]> http://www.serpito.com/php-jquery-image-crop-thumbnail/feed/ 3