Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

20Ara/150

Bootstrap Nedir, Ne iş yapar, Neden kullanılır

Sevgili Blogum, okurlarım, google bot Bootstrapresponsive ve mobile-first projeler geliştirebileceğimiz en popüler framework'lerden biridir. Kendileri twiter tarafından responsivite amaçlı geliştirilmiştir. Özellikle Google'ın 21 nisan güncellemesi ile arama algoritmasında değişikliğe gidip, mobil arayüzü desteği olmayan siteleri 2. plana atacağını söylemesiyle birlikte her zamankinden daha fazla ihtiyaç duyuldu.

Responsive, duyarlı / uyumlu web tasarım, yani mobil cihazlarda iyi bir deneyim sunan web siteleridir.
Mobile-first, Web teknolojilerinde önceliği cep telefonuna ver, pc tarafını ondan sonra planla demektir.

Bootstrap ve buna benzer tüm plugin veya framework'leri belgemize dahil etmenin 2 yolu vardır. İlki CDN kullanmak, ikincisi de kütüphane dosyalarını kendi sunucumuzda host etmek. Benim kişisel önerim tüm plugin veya framework'leri kendi sunucunuza çekmeniz şeklindedir. Nedeni ise geliştirme süreçinde internet bağımlılığından kurtulma; kullanılan versionun desteğinin kalkması gibi durumlardan etkilen meme ve gerektiğinde uygulamaların yanlız intranet (iç network) üzerinden erişimi. en son aklıma gelen de https bağlantılarında cdn'in eklentısını kontrol etme gereksiniminden kurtulma (bu sonuncusu tembellikten başka bir şey değil)

Peki bu işler nasıl yapılır; GetBootStrap sayfasındaki Download bölümüne girip Download Bootstrap dersın ve gelir. güncel versionda 'bootstrap-3.3.6-dist' dosyası gelmekte.

CSS\bootstrap.css
CSS\bootstrap-theme.css
JS\bootstrap.min.js

bu dosyalari sayfaniza dahil ettikten sonra Jquery'yi de dahil etmeniz gerekmektedir. visual studio da bir MVC projesi açtığımızda nasıl gözüküyor neler çekiyor bir bakalım:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" id="registerLink"><span class="glyphicon glyphicon-user"></span> Register</a></li>
        
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        


<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>

        <hr />
        <footer>
            <p>© 2015 - My ASP.NET Application</p>
        </footer>
    <script src="/Scripts/jquery-1.11.3.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</body>
</html>

7. ve 8. satırlarda

<link href="/Content/bootstrap.css" rel="stylesheet" />

<link href="/Content/bootstrap-theme.css" rel="stylesheet" />

72 ve 73 de

<script src="/Scripts/jquery-1.11.3.js"></script>

<script src="/Scripts/bootstrap.js"></script>

Content demesenin sebebi mvc projesinde cssleri default projede orada toplamışlar. Sayfayı bir gözden geçircek olursak ana tablo altında bir grid yapısı vs mevcut. bunları da anlatacağım ama hızlı olarak tab anlamarını söyliyim ve bu günlük bitiriyim.

.col-xs-*(extra small) - ekstra küçük cihazlar(telefonlar)
.col-sm-*(small) - küçük cihazlar(tabletler)
.col-md-*(medium) - orta boylu cihazlar(netbook'lar)
.col-lg-*(large) - geniş cihazlar(masaüstüler)

test ve görsel : http://www.bootply.com/xOLRwoOKFx

15Eyl/145

TC Kimlik No Algoritması ve hesaplaması

Merhabalar sevgili okurlarım, gerçeği söylemek gerekirse okurum olabilecek bir içeriğim yok. Bunun farkındayım, daha çok googlayanlaya yönelik bilgi kaynağım mevcut tabi.

Düşük cümleler kuruyorsam affola. Yavaş yavaş Türkçe karakterleri kullanmaya çalışıyorum.

Bir önceki yazımda IMEI ve Kredi kartı gibi verilerin kontrolünde kullanılan algoritmayı paylaşmıştım. Luhn Check digit Mode 10 algoritması Bu yazımda da T.C. kimlik numarasının 10. ve 11. hanelerini hesaplayacağız.

Öncelik ile tc kimlik no Türkiye Cumhuriyeti vatandaşlarının kimliklerine verilen ID (identification) numaralarıdır. Devlet dairelerinde, bankalarda ve bir çok noktada güvenlik ve kimlik tanımlama işlemi için kullanılır. T.C. veri tabanında sorgulamak için belirli anlaşmalar yapmanız ve ücretini ödemeniz gerekmektedir. T.C. Kimlik No o kişiye ait mi bunun kontrolünü direk siz yapamazsınız fakat Numara kurallara uygun mu buna bakarsınız; Bunun için gerekli bilgiler :
  1. TC Kimlik numaraları 11 basamaktan oluşmaktadır.
  2.  İlk 9 basamak arasında kurulan bir algoritma bize 10. basmağı, ilk 10 basamak arasında kurulan algoritma ise bize 11. basamağı verir.
  3.  11 hanelidir.
  4. Her hanesi rakamsal değer içerir.
  5.  İlk hane 0 olamaz.
  6. Son hane tek sayi (1,3,5,7,9) olamaz
  7. 1. 3. 5. 7. ve 9. hanelerin toplamının 7 katından, 2. 4. 6. ve 8. hanelerin toplamı çıkartıldığında, elde edilen sonucun 10′a bölümünden kalan, yani Mod10′u bize 10. haneyi verir.
  8. 1. 2. 3. 4. 5. 6. 7. 8. 9. ve 10. hanelerin toplamından elde edilen sonucun 10′a bölümünden kalan, yani Mod10′u bize 11. haneyi verir.
  9. 10. hanenin hesaplama şekline göre çift bir sayının 10'a bölümü çift, tek bir sayının 10'a bölümü tek sayı olur. 2 adet çift sayının toplamı çift, 2 adet tek sayının toplamı çift sonuç verir. Bu sonuça göre Son hane her zaman çifttir. 

Şimdi gelelim farklı dillerdeki doğrulama örneklerine.

C#

public static bool TcDogrulaV2(string tcKimlikNo)
{
    bool returnvalue = false;
    if (tcKimlikNo.Length == 11)
    {
        Int64 ATCNO, BTCNO, TcNo;
        long C1,C2,C3, C4, C5,C6,C7,C8, C9,Q1,Q2;
 
        TcNo = Int64.Parse(tcKimlikNo);

	// bolu yuz islemi int tanimlanmis degiskende son 2 haneyi silmek icin kullanılır.
 
        ATCNO = TcNo / 100;
        BTCNO = TcNo / 100;
 
         C1 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C2 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C3 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C4 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C5 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C6 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C7 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C8 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         C9 = ATCNO % 10;  ATCNO = ATCNO / 10 ;
         Q1 = ((10-((((C1+C3+C5+C7+C9)*3)+(C2+C4+C6+C8))%10))%10);
         Q2 = ((10-(((((C2+C4+C6+C8)+Q1)*3)+(C1+C3+C5+C7+C9))%10))%10);

         /*
         Q1 TC nosunun 10. hanesi
         Q2 TC nosunun 11. hanesi
         BTCNO son 2 hanesi olmayan tckimlikNo
         */ 

         returnvalue = ((BTCNO * 100)+(Q1 * 10)+Q2 == TcNo);
    }
    return returnvalue;
}

Vb.Net

Function TcDogrulaV2(ByVal tcKimlikNo As String) As Boolean
    Dim returnvalue As Boolean = False
    If (tcKimlikNo.Length <> 11) Then
        tcCustom.ErrorMessage = "<br>TC Kimlik Numarası 11 Haneli Olmalıdır."
        Return returnvalue
    End If
    Dim TcNo As Long = Long.Parse(tcKimlikNo)
    Dim BTCNO As Long = Long.Parse(Left(tcKimlikNo, 9))
         
    Dim C1 As Long = Long.Parse(Mid(tcKimlikNo, 1, 1))
    Dim C2 As Long = Long.Parse(Mid(tcKimlikNo, 2, 1))
    Dim C3 As Long = Long.Parse(Mid(tcKimlikNo, 3, 1))
    Dim C4 As Long = Long.Parse(Mid(tcKimlikNo, 4, 1))
    Dim C5 As Long = Long.Parse(Mid(tcKimlikNo, 5, 1))
    Dim C6 As Long = Long.Parse(Mid(tcKimlikNo, 6, 1))
    Dim C7 As Long = Long.Parse(Mid(tcKimlikNo, 7, 1))
    Dim C8 As Long = Long.Parse(Mid(tcKimlikNo, 8, 1))
    Dim C9 As Long = Long.Parse(Mid(tcKimlikNo, 9, 1))
         
    Dim Q1 As Long = ((10 - (((((((C1 + C3) + C5) + C7) + C9) * 3) + (((C2 + C4) + C6) + C8)) Mod 10)) Mod 10)
    Dim Q2 As Long = ((10 - (((((((C2 + C4) + C6) + C8) + Q1) * 3) + ((((C1 + C3) + C5) + C7) + C9)) Mod 10)) Mod 10)
    'Response.Write((((BTCNO * 100) + (Q1 * 10)) + Q2) & " - ")
    'Response.Write(tcKimlikNo)
    If ((((BTCNO * 100) + (Q1 * 10)) + Q2) = TcNo) Then
        tcCustom.ErrorMessage = ""
    Else
        tcCustom.ErrorMessage = "<br>Hatalı TC Kimlik Numarası."
    End If
       
    Return ((((BTCNO * 100) + (Q1 * 10)) + Q2) = TcNo)
End Function

Javascript

function check_tcno(a){
  if(a.substr(0,1)==0&&a.lenght!=11){
    return false;
  }
  var i = 9, md='', mc='', digit, mr='';
  while(digit = a.charAt(--i)){
    i%2==0 ? md += digit : mc += digit;
  }
  if(((eval(md.split('').join('+'))*7)-eval(mc.split('').join('+')))%10!=parseInt(a.substr(9,1),10)){
    return false;
  }
  for (c=0;c<=9;c++){
    mr += a.charAt(c);
  }
  if(eval(mr.split('').join('+'))%10!=parseInt(a.substr(10,1),10)){
    return false;
  }
  return true;
}

PHP

// with pattern
function check_tcno($tcno) {
        preg_replace('/([1-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1}).*$/e', "eval('\$on=((((\\1+\\3+\\5+\\7+\\9)*7)-(\\2+\\4+\\6+\\8))%10); \$onbir=(\\1+\\2+\\3+\\4+\\5+\\6+\\7+\\8+\\9+\$on)%10; \$sonIki = \$on.\$onbir;')", $tcno);
        return(substr($tcno, -2) == $sonIki);
}

// spagetti
function _tcNoCheck($tcNo){
    // For Controller
    $isDouble = is_double($tcNo);
    $size     = strlen($tcNo);
    $type     = gettype($tcNo);
              
    // First Controller
    if($tcNo == "" || $tcNo == null || $tcNo == 0){
        return false; //Bu alan boş bırakılamaz!
    }else if($size != 11 && $type != "integer"){            
        // Data Type Size Controller
        return false; //T.C. kimlik no 11 haneli olmak zorundadır!
    }else if($type == "integer"){
        // Type convert controller
        return false; //T.C. kimlik no 0(sıfır) ile başlayamaz ve 11 hane olmak zorundadır!
    }else if($isDouble != true) {
        // Data Type Controller
        return false; //T.C. kimlik no sadece sayısal girilmelidir!
    }else{
        // TC NO's
        $tc1;$tc2;$tc3;$tc4;$tc5;$tc6;
        $tc7;$tc8;$tc9;$tc10;$tc11;
              
        $tc1 = substr($tcNo,0,1);
        $tc2 = substr($tcNo,1,1);
        $tc3 = substr($tcNo,2,1);
        $tc4 = substr($tcNo,3,1);
        $tc5 = substr($tcNo,4,1);
        $tc6 = substr($tcNo,5,1);
        $tc7 = substr($tcNo,6,1);
        $tc8 = substr($tcNo,7,1);
        $tc9 = substr($tcNo,8,1);
        $tc10 = substr($tcNo,9,1);
        $tc11 = substr($tcNo,10,1);
  
        //First Algo. Checks
        $algoCheck1 = (($tc1 + $tc3 + $tc5 + $tc7 + $tc9) * 7);
        $algoCheck2 = abs(((($tc2 + $tc4 + $tc6 + $tc8) - $algoCheck1) % 10));
        $algoCheck3 = (($tc1 + $tc2 + $tc3 + $tc4 + $tc5 + $tc6 + $tc7 + $tc8 + $tc9 + $tc10) % 10); 
                  
        if($algoCheck2 != $tc10){
            return false; //Geçersiz T.C. kimlik no!!!
        }
                 
        if($algoCheck3 != $tc11){
            return false; //Geçersiz T.C. kimlik no!!!
        }
    }
              
        //GEÇERLİ T.C. Kimlik No.>";
        return true;
 }

//kisaltilmis (ev makarnasi :p)

function is_valid_tckn( $tckn )
{
    $x = $tckn;
    $valid1=((7*($x[0]+$x[2]+$x[4]+$x[6]+$x[8])-($x[1]+$x[3]+$x[5]+$x[7]))%10)==$x[9];
    $valid2=(($x[0]+$x[1]+$x[2]+$x[3]+$x[4]+$x[5]+$x[6]+$x[7]+$x[8]+$x[9])%10)==$x[10];
    return $valid1 && $valid2;
}

Delphi

Function TCKimlikDogrula(TCNo : String) : Boolean;
var
 bir,iki,uc,dort,bes,alti,yedi,sekiz,dokuz,onn,onbir,
 ilk,son,onuncu,onbirinci :  integer;
 _Soniki, pSoniki : string;
begin
 if (Length(TCNo) < 11) or (Length(TCNo) > 11 ) then
  begin
     ShowMessage('doğru düzgün gir tc no nu !!');
     Abort
  end
   else
 bir := StrToInt(TCNo[1]);
 iki := StrToInt(TCNo[2]);
 uc  := StrToInt(TCNo[3]);
 dort:= StrToInt(TCNo[4]);
 bes := StrToInt(TCNo[5]);
 alti:= StrToInt(TCNo[6]);
 yedi:= StrToInt(TCNo[7]);
 sekiz:= StrToInt(TCNo[8]);
 dokuz:= StrToInt(TCNo[9]);
 onn  := StrToInt(TCNo[10]);
 onbir:= StrToInt(TCNo[11]);
 
 ilk := (bir+uc+bes+yedi+dokuz) * 7;
 son := iki+dort+alti+sekiz;
 onuncu := (ilk - son) mod 10;
 onbirinci := (bir+uc+bes+yedi+dokuz+iki+dort+alti+sekiz+onuncu);
 onbirinci := onbirinci mod 10;
 
 _Soniki := IntToStr(onuncu) + IntToStr(onbirinci);
 pSoniki := TCNo[10] + TCNo[11];
 
 if _Soniki = pSoniki then
  begin
   Result := True;
  end
   else
    Result := False;
end;

Python

# -------------------------------------------------------------------------
# tc numarasının checksum kısmını hesaplayan kısım
def tcno_checksum(tcno):
    tc    = '%d' % tcno
    tc10  = int(tc[0]) + int(tc[2]) + int(tc[4]) + int(tc[6]) + int(tc[8])
    tc10 *= 7
    tc10 -= int(tc[1]) + int(tc[3]) + int(tc[5]) + int(tc[7])
    tc10 %= 10
 
    tc11  = int(tc[0]) + int(tc[1]) + int(tc[2]) + int(tc[3]) + int(tc[4])
    tc11 += int(tc[5]) + int(tc[6]) + int(tc[7]) + int(tc[8]) + int(tc10)
    tc11 %= 10
 
    return '%s%d%d' % (tc, tc10, tc11)

Tsql

CREATE PROCEDURE [dbo].[tckimliknoDogrulama]

(

@TCKimlikNo nvarchar(11)

)

AS

SET NOCOUNT ON

if @TCKimlikNo is null

begin

return 'false'

end

if LEN(@TCKimlikNo) <> 11

begin

return 'false'

end

--Sayi mi degil mi kontrolu

declare @count int

select @count=1

while @count<=LEN(@TCKimlikNo)

begin

if substring(@TCKimlikNo,@count,1)<>'0' and substring(@TCKimlikNo,@count,1)<>'1' and substring(@TCKimlikNo,@count,1)<>'2'

and substring(@TCKimlikNo,@count,1)<>'3' and substring(@TCKimlikNo,@count,1)<>'4' and substring(@TCKimlikNo,@count,1)<>'5'

and substring(@TCKimlikNo,@count,1)<>'6' and substring(@TCKimlikNo,@count,1)<>'7' and substring(@TCKimlikNo,@count,1)<>'8'

and substring(@TCKimlikNo,@count,1)<>'9'

begin

return 'false'

end

select @count= @count+1

end

--Cift mi degil mi kontrolu

if (substring(@TCKimlikNo,LEN(@TCKimlikNo),1)<>'0' and

substring(@TCKimlikNo,LEN(@TCKimlikNo),1)<>'2' and

substring(@TCKimlikNo,LEN(@TCKimlikNo),1)<>'4' and

substring(@TCKimlikNo,LEN(@TCKimlikNo),1)<>'6' and

substring(@TCKimlikNo,LEN(@TCKimlikNo),1)<>'8' )

begin

return 'false'

end

declare @tmp1 bigint,@tmp bigint,@asb nvarchar(9),@str nvarchar(5)

select @tmp1= convert(bigint,@tckimlikno)/100, @tmp= convert(bigint,@tckimlikno)/100

select @count =9,@asb=''

while @count>0

begin

select @str=substring(@TCKimlikNo,@count,1)

select @asb=@asb+@str

select @count = @count -1

end

declare @oddsum bigint,@evensum bigint,@evensumtot bigint,@oddsumtot bigint,@total bigint,@chkdigit1 bigint,@chkdigit2 bigint

SELECT @oddsum=convert(bigint,(substring(@asb,1,1)))+convert(bigint,(substring(@asb,3,1)))+convert(bigint,(substring(@asb,5,1)))+convert(bigint,(substring(@asb,7,1)))+convert(bigint,(substring(@asb,9,1)))

SELECT @evensum=convert(bigint,(substring(@asb,2,1)))+convert(bigint,(substring(@asb,4,1)))+convert(bigint,(substring(@asb,6,1)))+convert(bigint,(substring(@asb,8,1)))

select @oddsumtot=@oddsum,@evensumtot=@evensum

select @total=@oddsum*3+@evensum

select @chkdigit1= (10-@total%10)%10

select @oddsum= @chkdigit1+@evensumtot

select @evensum= @oddsumtot

select @total = @oddsum*3+@evensum

select @chkdigit2=(10-@total%10)%10

select @tmp =@tmp*100+@chkdigit1*10+@chkdigit2

if @tmp <> convert(bigint,@tckimlikno)

begin

return 'false'

end

else

begin return 'true'

end

RETURN

 

10Mar/120

Jquery mobile 2. sayfa – Jquery mobile çoklu sayfa örneği

Merhaba arkadaslar;

daha önce sizinle jquery mobile giris dersini paylaşmıştım şimdide çoklu sayfa örneği paylaşmak istedim. örnegin kodlarını sunmadan önce size görüntüsünü ve calışan linkini vermek istedim.

Link : http://rakkoc.com/jquerymobile/coklusayfa.htm

kodlar :

<html> 

 <head> 

  <title>Mobile Jquery Örneği</title> 

  <meta http-equiv=content-type content=text/html;charset=iso-8859-9>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

 </head> 

 <body> 

 <!-- İlk sayfamız başlangıç -->

 <section id="ilksayfa" data-role="page">

 <header data-role="header"><h1>Header alanımız</h1></header>

  <div class="content" data-role="content">

   <p>İlk sayfamız</p>

   <a href="#ikincisayfa">İkinci sayfaya git</a>

  </div>

  <footer data-role="footer"><h1>Footer alanımız</h1></footer>

  </section>

  <!-- İlk sayfamız bitiş -->

  <!-- İkinci sayfamız başlangıç -->

  <section id="ikincisayfa" data-role="page">

   <header data-role="header"><h1>Header alanımız</h1></header>

  <div class="content" data-role="content">

  <p>İkinci sayfamız</p>

  </div>

  <footer data-role="footer"><h1>Footer alanımız</h1></footer>

  </section>

  <!-- İkinci sayfamız bitiş -->

</body>

</html>

Dikkat ederseniz data-role="page" niteliği olan iki section tag’imizden sadece ilki göründü. JQuery Mobile otomatik olarak bir HTML sayfası içerisinde yer alan birden fazla data-role="page" niteliğindeki tag’lerden sadece ilkini görüntüler. İlk section tag’imiziçerisinden a tag’inin href niteliği ile ikinci section tag’imize çağrıda bulunduğumuzda JQuery Mobile mobil tarayıcımızda ikinci bir sayfa olarak görüntüleme yapar. İkinci sayfamızda bizim yazmadığımız fakat kendiliğinden beliren bir navigasyon butonu yer almakta, bunu JQuery Mobile kendisi sayfalarımızda herhangi bir yönlendirme olduğunda otomatik olarak sayfamıza eklemektedir. Bir sayfadan diğerine geçişlerde istersek birbirinden farklı efektler uygulayabiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-transition niteliğini eklememiz. Bu niteliğe uygulayabileceğimiz efekt listesi.

slide Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda soldan sağa, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise sağdan sola sayfalarımızı kaydırarak getirir. Eğer sayfalarımızdaki a taglarımıza herhangi bir data-transition belirtmezsek sayfamızda varsayılan olarak bu efekt kullanılır.
slideUp Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda aşağıdan yukarı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise yukarıdan aşağı sayfalarımızı kaydırarak getirir.
slideDown Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda yukarıdan aşağı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise aşağıdan yukarı sayfalarımızı kaydırarak getirir.
pop Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda içeriden dışarı doğru büyüyerek, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise dışarıdan içeri doğru küçülerek sayfalarımızı getirir.
fade Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna tıkladığımızda soldurarak sayfalarımızı getirir.
flip Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna tıkladığımızda çevirerek sayfalarımızı getirir.

İkinci örneğimizde yer alan a tag’imize bir efekt uygulamak istersek kod bloğumuz aşağıdaki gibi düzenlenmelidir.

<a href="#ikincisayfa" data-transition="fade">İkinci sayfaya git</a>

Yukarıda belirtilen tablodaki sayfa geçiş efektlerimizi daha eğlenceli bir hale getirmek için açılan sayfalarımızı köşeleri yuvarlanmış bir dialog penceresi içinde de gösterebiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-rel niteliğini eklemektir. İşin eğlenceli yani ise her bir efekt sayfamızda açılacak olan dialog penceresi için farklı geçişler sağlayacaktır. Sayfamızda data-transition niteliğini kullanmadan dialog penceresi içerisinde sayfamızı görüntülemek istediğimizde varsayılan efekt olarak “pop” efekti uygulanacaktır. İkinci örneğimizde yer alan son sayfamızı bir dialog penceresi içerisinde göstermek istersek kod blogumuz aşağıdaki gibi düzeltilmelidir.

<a href="#ikincisayfa" data-rel="dialog" data-transition="flip">İkinci sayfaya git</a>

 

21Şub/120

Mobile JQuery’e giris

Merhaba arkadaslar Mobile JQuery hakkında kendi calismalarimla baslayarak sizinle bildiklerimi ve ogrendiklerimi paylasmak istedim.

MobileJQuery Nedir

Mobile JQuery; JQuery Javascript framework'unun mobil cihazlara entegre edilmis halidir. Sadece javascript kodlari acisindan degil; ona gore duzenlenmis css ler butonlar ve imagelarida icerisinde barindirir.

Kendim ilk testlerimi yapmak icin http://restorant.rakkoc.com adresini kullaniyordum. kendi projem olan restorant uygulamasini bu framework uzerinde gelistiriyorum.

Nasil Kullanilir

Ben bu yazimi yazarken aktif olan 1.0.1 versionunu kendi siteme upload ettim ve burdan indire bilirsiniz.

illa bu dosyaya ihtiyaciniz yok; Jquery'nin kendi serverlarindan da bu islemleri gerceklestirme yoluna gide bilirsiniz bunun icin asagidaki kodu head taginizin arasina ekleyiniz.

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Bu kodlari ekledikten sonra mobile jquery'nin baslangicini yapiyor oluyoruz.

Örnek sayfa yaratma

örnek olarak bir sayfa yaratacak olursak; İstediginiz bir metin editorune asagidaki ornek sayfa kodunu yapistirip kaydedin. Tarayiciniz ile acin ve artik sizde bir mobil web sayfasi gelistiricisiniz 🙂

<!DOCTYPE html>
<html>
	<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Hello world</p>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

suan mobil jqueryli ilk sayfamizi yapmis bulunmaktayiz 🙂

4Şub/125

WP Arkaplan eklentisi

Merhaba sevgili okurlarim; Yildirim Yavuz arkadaşımın boyle seylerden hoşlanması adına hasta yatağımda bir kod yazip bloguma ekledim. Kod aşağıdaki şekilde cookie uzerine seçilen arkaplani kaydetip sayfanin arkaplan resmini anlik değiştirme imkani sunmaktadir. bunu database'e ekleyip tam bir eklenti formatina cevirmek filan gerekli ama suanda onunla ugraşacak pek zamanim yok malum projelerin icinde kosusturup duruyorum.
<script type="text/javascript">// <![CDATA[
function arkaPlanDegis(resim)
{
document.body.style.backgroundImage = 'url(' + resim + ')';
createCookie("arkaPlan",resim,99);
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

function CagirEskiArkaplan()
{
var a=readCookie("arkaPlan");
arkaPlanDegis(a);
}

window.onload = CagirEskiArkaplan;
// ]]></script></pre>
<div id="rakBar"><center>
<div class="divArkaResimler">
<div class="divArkaResim"><a onclick="arkaPlanDegis('http://blog.rakkoc.com/bg/tahta1.jpg');" href="javascript:void(0)"><img src="http://blog.rakkoc.com/bg/tahta1.jpg" alt="" width="46" height="46" border="0" /></a></div>
<div class="divArkaResim"><a onclick="arkaPlanDegis('http://blog.rakkoc.com/bg/tahta2.jpg');" href="javascript:void(0)"><img src="http://blog.rakkoc.com/bg/tahta2.jpg" alt="" width="46" height="46" border="0" /></a></div>
<div class="divArkaResim"><a onclick="arkaPlanDegis('http://blog.rakkoc.com/bg/kare.jpg');" href="javascript:void(0)"><img src="http://blog.rakkoc.com/bg/kare.jpg" alt="" width="46" height="46" border="0" /></a></div>
<div class="divArkaResim"><a onclick="arkaPlanDegis('http://blog.rakkoc.com/bg/yok.jpg');" href="javascript:void(0)"><img src="http://blog.rakkoc.com/bg/yok.jpg" alt="" width="46" height="46" border="0" /></a></div>
</div>
</center></div>
<pre>
Toplam 2 sayfa mevcuttur; 1. sayfayi okuyorsunuz...12