Instagram

 Günümüzde oldukça popüler olan ve Facebook'un satın alması ile daha da büyüyen fotoğraf paylaşma uygulaması olan Instagram , diğer uygulamarın (facebook,twitter,googleplus vs) da oldugu gibi geliştiricilere sunduğu apisi bulunmaktadır. Instagram Developer sitesini ziyaret ederek geliştirici dökümantasyonuna ulaşabilirsiniz. Oradaki örnekleri inceleyerek Instagram'ın bize sunduğu nimetlerden yararlanabilirsiniz.

 Bende bugün bu apiyi kullanarak sizlere instagram fotoğramlarımı listeleyeceğim. Fazla uzatmadan hemen sırasıyla işlemlerimizi gerçekleştirelim :

1) Instagram'a login olduktan sonra http://instagram.com/developer/clients/register/ linkine tıklıyoruz. Karşımıza gelen ekranda bilgileri dolduruyoruz ve "Register" butonuna basıyoruz.

Register a New Client

Register a New Client

 

2) Artık uygulamamıza ait "Client ID" ve "Client Secret" unique değerlerine sahibiz. Bize lazım olan "authentication token" almak için aşağıdaki linke bize verilen client id'mizi ve web site linkimizi yazıyoruz.

https://instagram.com/oauth/authorize/?display=touch&client_id=[ClientID]
&redirect_uri=[callbackuri]/&response_type=token

3) Linkimizin sonucunda yazdığımız sitenin sonuna eklenen "code" parametresinin değeri bize "authentication token" verecek.

http://your-redirect-uri?code=CODE

4) Aldığımız bu code sayesinde artık instagram ile iletişim kurabileceğiz. İletişim kurmadan önce instagram user id'mizi "Get your instagram user ID"  tıklayarak alabiliriz. Artık bu işlemlerimizi tamamladıktan hemen jquery yardımıyla jsonp data tipiyle resimlerimizi ve bu resimlere ait bilgileri çekelim.

Eğer popüler fotoğrafları görüntülemek istiyorsak ;
url:  "https://api.instagram.com/v1/media/popular?client_id=[ClientID]&access_token=[CODE]"

Eğer kişisel fotoğraflarımızı görüntülemek istiyorsak ;
url: "https://api.instagram.com/v1/users/[UserID]/media/recent/?access_token=[CODE]"

Eğer belirttiğimiz bir etikete göre son fotoğrafları görüntülemek istiyorsak;
url:  "https://api.instagram.com/v1/tags/[TAG]/media/recent?client_id=[ClientID]&access_token=[CODE]"

Eğer belirlediğimiz bir yere göre son fotoğrafları görüntülemek istiyorsak;
url:  "https://api.instagram.com/v1/media/search?lat=[LAT]&lng=[LNG]&distance=[DST]?client_id=[ClientID]&access_token=[CODE]"

$.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/users/[UserID]/media/recent/?access_token=[CODE]",
        success: function(data) {...}
    });
});

 

Görüldüğü gibi instagram üzerinden fotoğraflarımı çektim. Bu fotoğrafları düzenlemek artık size kalmış :) Aşağıdan yaptığım örneği inceleyebilirsiniz.

 

Kaynak : techmonks.net

 

Asp.Net & Jquery

 

  Jquery' nin o kadar nimetleri var ki bugün size çok kullandığımız fonksiyonundan bahsedeceğim. Asp.Net kontrollerindeki bazı değerleri alabilmek için javascript ile document.getElementByID("id").value fonksiyonunu kullanıp değerimizi alıyoruz. Bunu gelelim birde jquery ile yazalım.

Kullanacağımız kontrolleri ekleyelim.

<textarea id="txtArea_mesaj" cols="20" rows="1"></textarea><br />
            <br />
            <asp:TextBox ID="txt_mesajServer" runat="server"></asp:TextBox><br />
            <br />
            <asp:Button ID="btn_kopyala" runat="server" Text="kopyala" OnClientClick="javascript:MesajKopyala();return false;" /><br />
            <br />
            <asp:TextBox ID="txt_mesajKopyasi" runat="server"></asp:TextBox><br />
            <br />
            <input id="txt_mesajKopyasiHtml" type="text" /><br />
            <br />
            <span id="spn_mesaj">Mesaj boş ...</span>

Kontrolleri ekledikten sonra script dosyamızı ekleyelim. Ben burada Asp.Net Jquery CDN kullandım. Bunu kullanmamdaki amaç ise; sayfalarimizda kullandigimiz AJAX kutuphanelerimizi (jQuery ve ASP.Net Ajax) ucretsiz olarak tum dunyada bir cok farkli ulkeye yerlestirilmis serverlar uzerinde cacheleyebilmemizi sağladığı için tercih ettim.

Daha detaylı bilgi için : Microsoft Ajax Content Delivery Network

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js"></script>

Değer alma ve atama işlemlerini yapacağımız scriptimizi yazalım.

<script type="text/javascript">
        function MesajKopyala() {
            var mesajHtml = $("#txtArea_mesaj").val(); //get value  (html control)
            var mesajSvr = $("#<%=txt_mesajServer.ClientID%>").val(); //get value (server control)
            var mesaj = mesajHtml + " " + mesajSvr;
            $("#<%=txt_mesajKopyasi.ClientID%>").val(mesaj); //set value (server control)
            $("#txt_mesajKopyasiHtml").val(mesaj); //set value (html control)
            $("#spn_mesaj").html(mesaj); //set value (html control)
            return false;
        }    
    </script>

Jquery ve Asp.Net Kontrolleri:Değer Atama ve Alma

Görüldüğü gibi istediğimiz kontolün id'sini kullanarak değerini alıp, başka kontrollere atamayı bu şekilde yapabiliriz.

Örnek uygulamayı indirmek için jquerySetGetValue.rar (2,82 kb) tıklayınız.

 

Asp.Net & Jquery

  Herkese ilk önce başka bir binary günden merhaba demek istiyorum Smile (01.11.2011) Özellikle web projelerimizde çok kullandığımız asp.net gridview için hepimiz belli başlı özelliklere göre filtreleme işlemleri yapmaktayız. Bu işlemleri yaparken bazen sql procedurelere bazen codebehind tarafındaki kodlarımıza sayesinde yaparız. Alternatif seçenek aslında oldukça çok. Fakat basit bir filtreleme işlemi için sistemi yormadan ve en hızlı bir şekilde yapmak için velinimetimiz olan Jquery hemen imdadımıza yetişir. Jquery.quicksearch plugini sayesinde çok rahat ve hızlı bir şekilde istediğimiz aramayı gerçekleştirebiliriz. Bunu küçük bir örnek ile açıklarsak ;

<asp:TextBox ID="id_search" runat="server" placeholder="Search">
</asp:TextBox>

Filtreleme yapmak için bir tane textbox ekledik. Ardından hemen listelenecek olan veriler için xml data file eklenir.

<asp:XmlDataSource ID="productsDataSource" Runat="server" DataFile="~/App_Data/Products.xml"> 
</asp:XmlDataSource>

Sonra verileri listeleyeceğimiz gridview eklenir ve onprerender parametresine codebehind tarafında yazacağımız fonksiyonun adı yazılır.

<asp:GridView ID="grd_telefonDurumu" Runat="server" 
        DataSourceID="productsDataSource" AutoGenerateColumns="False" 
        ClientIDMode="Static" onprerender="grd_telefonDurumu_PreRender" >
        <Columns>
            <asp:BoundField HeaderText="" DataField="ProductID" 
                            SortExpression="ProductID" ItemStyle-HorizontalAlign="Center"></asp:BoundField>
            <asp:BoundField HeaderText="Model" DataField="ProductName" 
                            SortExpression="ProductName"></asp:BoundField>
            
            <asp:BoundField HeaderText="Fiyat" DataField="UnitPrice" 
                            SortExpression="UnitPrice"></asp:BoundField>
            <asp:BoundField HeaderText="Stok(Adet)" DataField="UnitsInStock" 
                            SortExpression="UnitsInStock"></asp:BoundField>
        </Columns>
    </asp:GridView>


Codebehind tarafına geçip aşağıdaki kodlar yazılır. Bunu yapmamızdaki neden ise; gridview sonuçta bir table olarak bize dönüş yapıyor. Biz, jquery quicksearch eklentisini kullanırken, gridview içinde arama yaparken headerlara takılmaması için tablo yapısını <thead></thead> ve <tbody></tbody> şeklinde ikiye ayırıyoruz. Böylece tbody içinde arama yapıp istediğimiz sonuca ulaşıyoruz.

protected void grd_telefonDurumu_PreRender(object sender, EventArgs e)
    {
        if (grd_telefonDurumu.Rows.Count > 0)
        {
            grd_telefonDurumu.UseAccessibleHeader = true;
            grd_telefonDurumu.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
    }

Buraya kadar işlemlerimiz tamamladıysak artık Jquery kısmına geçelim. Hemen kullandığımız script dosyalarını ekleyelim.

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>

Ardından arama scriptimizi yazalım.

<script type="text/javascript">
        $(function () {
            $('input#id_search').quicksearch('table#grd_telefonDurumu tbody tr');
        })
    </script>

Plugin sayesinde gridview içinde istrediğimizi aramak bu kadar basit. Plugini kendi istediğiniz şekilde, daha etkili bir biçimde kullanabilirsiniz.

 

Jquery ile Asp.Net Gridview Filtreleme İşlemleri

 

Quicksearch plugini keşfetmek istiyorsanız burayı, örnek uygulamayı indirmek istiyorsanız quicksearch.rar (34,65 kb) tıklayınız.

jquery methodlari

 

Hide, Show, Toggle, Slide, Fade, ve Animate ... JQuery' nin en çok bilinen fonksiyonlarıdır. İlk olarak aslında her yerde bahsedilen başlıca efektlerden bahsedelim. Bu efektler jQuery'i jQuery yapan efektler.

 

Bu efektleri açıklamak gerekirse;

 

jQuery hide()
Seçilen elemanı gizlemeye yarar.

jQuery slideToggle()
Slayt panel oluşturulur.

jQuery fadeTo()
Seçilen öğreyi karartarak kaybeder.

jQuery animate()
Seçilen öğeye animasyon oluşturur.

jQuery Hide ve Show

jQuery hide ve show metodlarıyla belirlenen seçicileri gizleyip göstermeye yarar.Örnek;


$("#gizle").click(function(){
 $("p").hide();
 });
 $("#goster").click(function(){
 $("p").show();
 });

hide() ve show() metodlarıyla istediğimiz öğeyi gizleyip gösterebilirken bu gizleme ve gösterme esnasında efektin oluşma hızını (süresi) kendiniz belirleyebilirsiniz.Bu belirleme işlemi ingilizce sıfatlardan oluşabileceği gibi milisaniye olarakta bir değer atanabilir. Aşağıdaki 1000 milisaniye olarak gösterdiğim bölüme; slow, fast, normal gibi değerler de girilebilir.


$("efekt").click(function(){
 $("p").hide(1000);
 });

 

 

jQuery Toggle

jQuery toggle fonksiyonu hide() ve show() metodlarının bir arada kullanılmış halidir. Yani toggle metodunu kullanarak tek bir fonksiyon ile hem açma hem de kapama işlemi gerçekleştirilebilir.


$("efekt").click(function(){
 $("p").toggle();
 });

jQuery Slide Fonksiyonu – slideDown, slideUp, slideToggle

jQuery slide fonksiyonu aşağıdaki gibi kullanılır;

$(seçici).slideDown(hız,callback)

$(seçici).slideUp(hız,callback)

$(seçici).slideToggle(hız,callback)

Hız parametresine; fast, slow, normal ya da milisaniye değeri girilebilir.

Callback parametresi ise , bu fonksiyonun bitmeden başka bir fonksiyon oluşturmak istenildiğinde, içeriye yeni bir fonksiyon atayabileceğiniz parametredir.

slideDown() Örneği;


$(".slide").click(function(){
 $(".panel").slideDown();
 });

slideUp Örneği;

$(".slide").click(function(){
 $(".panel").slideUp()
 })

slideToggle Örneği;

$(".slide").click(function(){
 $(".panel").slideToggle();
 });

jQuery Fade Fonksiyonları – fadeIn(), fadeOut(), fadeTo()

jQuery fade() fonksiyonları aşağıdaki gibi kullanılabilir,

$(selector).fadeIn(hız,callback)

$(selector).fadeOut(hız,callback)

$(selector).fadeTo(hız,şeffaflık,callback)

Hız parametresi fast, slow, normal ve milisaniye değeri içerir.

Callback parametresi fonksiyon bitmeden yeni bir fonksiyon atama işlemidir.

Şeffaflık değeri ise; yalnız fadeTo fonksiyonunda kullanılabilen gizlenme işleminin şeffaflık ayarını yapmayı sağlar.

fadeTo Örneği;

$("efekt").click(function(){
 $("div").fadeTo("slow",0.25);
 });

fadeOut Örneği;

$("efekt").click(function(){
 $("div").fadeOut(4000);
 });

 

 

JQuery Metodları

Belli başlı jQuery fonksiyonlarını özetlemek gerekirse;

Fonksiyon Açıklaması
$(seçici).hide() Seçilen elemanı gizler
$(seçici).show() Seçilen elemanı gösterir.
$(seçici).toggle() hide ve show fonksiyonlarını birlikte kullanmadır.
$(seçici).slideDown() Seçilen elemanı slayt şeklinde gösterir.
$(seçici).slideUp() Seçilen elemanı slayt şeklinde gizler
$(seçici).slideToggle() slideUp ve slideDown fonksiyonlarının birlikte kullanılmasıdır.
$(seçici).fadeIn() Seçilen elemanı kararkatarak gizler.
$(seçici).fadeOut() Seçilen elemanı kararma şiddetini azaltarak gösterir.
$(seçici).fadeTo() Seçilen elemanı şeffaflık derecesiyle fadeOut fonksiyonunu
$(seçici).animation() Seçilen elamana özel bir animasyon efekti verilir.

 

 

 

hovereffect

 

Çoğumuzun kullandığı özellikle portfolyo, reklam ve resimlerde çok kullandığımız efektlerden bir tanesidir mouse hover effect. Jquery yardımıyla fade in/out işlemleri gerçekleştirebiliyoruz. Yapmış olduğum örnekte iki türlü efekt olayını gösterdim.

 

 

Tek resim veya çift resim kullanarak mouse hover effectleri :







Çift resim kullandığımız takdirde scriptimiz :


$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});

Tek resim kullandığımız takdirde scriptimiz ( custom.js ) :

$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".resim_img").css("opacity","0.5");
	
// ON MOUSE OVER
$(".resim_img").hover(function () {
										  
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
		
// ON MOUSE OUT
function () {
			
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

...

 

demo