jQuery 1.4 Alpha 2 Released

posted @ Wednesday, December 23, 2009 1:47 PM | Feedback (2)

jQuery 1.4 Alpha 2 Released.

This is the second release of 1.4 Alpha version. 1.4 version contains some improvements and fixes. They are trying to fix all of the submitted bugs. And they will add some optimizations. Below a list of improvements from the Alpha 1 release announcement.

live was drastically overhauled and now supports submit, change, mouseenter, mouseleave, focus, and blur events in all browsers. Also now supports context and data.
append, prepend, etc. have been heavily optimized.
add has been adjusted to always return elements in document order.
find, empty, remove, addClass, removeClass, hasClass, attr, and css have been heavily optimized.

[ jquery ]

Visual Studio 2010 and .NET 4 Release Candidate

posted @ Wednesday, December 23, 2009 1:36 PM | Feedback (0)

ScottGu's announced about VS 2010 and .NET 4 Release Candidate releases. RC will be avaible in February.

The goal behind the Release Candidate is to ensure that performance problems in Beta2 are fixed and products are ready for RTM release.

ScottGu says this will postpone the RTM release a few weeks. I think every developer who will use this products can wait a few weeks for a high quality.

For more information you can read Scott's blog entry.

[ visual studio ]

Team Foundation Server Proxy

posted @ Tuesday, November 24, 2009 12:20 PM | Feedback (0)

Team System contains a server software named Team Foundation Server Proxy for using TFS SCM in remote locations with more efficient way.
Image at the below gives you ideas about using the TFS Proxy.
 

Think about that;  you have a distributed development environment, there are developers in another office location of your company. They can connect TFS over HTTP, there is no need for any other application or server infrastructure. But using TFS proxy speeds up the developers at the remote locations.

Clients don't connect to the TFS Proxy for every request. TFS Proxy be used for caching downloaded files, etc. For example when you checkout a file, TFC (Team Foundation Client - Team Explorer) directly connects to the main TFS server.
For setting up TFS Proxy server environment follow the steps in the TFS Installation Gude.

After the installation is completed you need to modify the proxy.config in the %PROGRAMFILES%\\Microsoft Visual Studio 2008 Team Foundation Server\Web Services\VersionControlProxy directory.

<?xml version="1.0" encoding="utf-8"?>
<proxyconf IGURATION xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <servers>
        <server>
            <Uri>http://NAMEOFYOURTFSSERVER:8080<Uri>
        </server>
    </servers>
   ....

Developer who will connect over proxy server needs to configure Team Foundation Client to use proxy server. In the configuration page (Visual Studio > Tools > Options > Source Control > Team Foundation Server) specify the proxy server name and port.

After that Team Explorer will use TFS Proxy for appropriate actions like getting latest version. But actions like checking out a file always be processed on TFS Server.

[ tfs team system english ]

Blog dili

posted @ Thursday, November 19, 2009 4:03 PM | Feedback (2)

Şu günlerde blogumun dilini İngilizce'ye çevirme ya da Türkçe devam etme arasında fikirler dolaşıyor kafamda. Yani blog yazılarımı İngilizce yayınlama fikrini düşünüyorum. Belki ikisini birden açık tutarım. Bilemiyorum, kararsızım. Makaleleri yazgelistir üzerinde Türkçe yazmaya devam eder twitter'da ki gibi blogumu İngilizce devam ettirebilirim. Kararsızım açıkcası. Bunun üzerine biraz uyuyalım bakalım. [ blog ]

Microsoft'dan Open Source CMS

posted @ Monday, November 16, 2009 3:04 PM | Feedback (0)

Microsoft'un daha önce başlattığı open source CMS projesi farklı bir isim ve MS desteksiz şekilde public olarak indirilebilir. Proje henüz yolun başında ancak Codeplex üzerinden source kodlara erişebileceğiniz söyleniyor. Ben henüz incelem fırsatı bulamadım ancak ASP.NET MVC için güzel  bir örnek olacağa benziyor.

ZDNET'den haberi : http://blogs.zdnet.com/microsoft/?p=4506
Codeplex sitesi : http://orchard.codeplex.com/
Kaynak kodlara erişim için : http://orchard.codeplex.com/wikipage?title=enlist&referringTitle=Documentation [ asp.net mvc c# open source web ]

jQuery - Giriş

posted @ Thursday, October 29, 2009 5:29 PM | Feedback (3)

jQuery küçük ancak çok yetenekli bir javascript kütüphanesidir. Web uygulamaları geliştirirken javascript ile yaptığımız standart işleri (DOM üzerinde gezinme, nesneleri kullanmak değiştirmek, eventları kullanmak gibi) uzun ve tekrar eden javascript kodları yazmak yerine bu kütüphaneyi kullanarak yapabiliriz.

DOM üzerinde gezinmek dediğimde kasdettiğim doğrudan javascript ile document.getElementById methodu ile yapabildiğimiz doküman üzerinde ki nesnelerimize erişmekten bahsediyorum.

Sadece bununla da kalmayıp jQuery pluginleri ile (örneğin thickbox kendi sitemde resimlerin üzerine tıklayınca büyük şekilde görüntülenmesi için bu plugini kullanıyorum. ilgili yazım)

Özetle, jQuery küçük ve dom nesnelerine erişim ve müdahale etmek için yetenekli javascript kütüphanesidir. Microsoft tarafından desteklenmeye başlamıştır ve ASP.NET MVC projelerinde dahili olarak gelmektedir.

jQuery üzerine çok fazla kelam etmektense hızla kod örneklerine geçelim ve ellerimizi bu işe bulaştıralım.

jQuery.com adresinden jquery kütüphanesine erişebilirsiniz. Kütüphane deyince gözünüzde büyütmeyin bildiğiniz .js dosyası. Makaleyi yazdığım sıradaki son sürümü 1.3.2.

Sayfaya eklemek için aşağıdaki şekilde indirdiğiniz js dosyasını kullanabilirsiniz. İndirip içinde neler olduğunu incelemek isteyenler jquery-1.3.2.js dosyasını (sitede ki development seçeneği ile) indirebilirsiniz. Ancak production ortamında kesinlikle minified sürümünü (jquery-1.3.2.min.js) kullanın boyutu daha küçüktür istemciye daha hızlı transfer edilir.

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

jQuery kütüphanesi kabul görmüş bir kaç javascript kütüphanesinden birisidir. Bu sebeple bir çok sitede kullanılıyordur. Eğer gerçekleştirdiğiniz uygulama internet üzerinde çalışacak ise (intranet uygulamalarında değil) CDN (Content Delivery Network) denilen hizmetleri kullanmanız yerinde olacaktır. Zira aynı CDN i kullanan bir siteyi daha önce ziyaret etmiş bir kullanıcı jquery.js dosyasını zaten browser cacheinde tuttuğu için sizin sitenize girdiğinde, kullanıcının browseri jquery.js dosyasını bir daha download etmeyecektir.

Google CDN'den kullanmak için;

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

Microsoft CDN'den kullanmak için; (Microsoft'un CDN hizmeti için anons yazısını okumak için tıklayınız.)

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

Aşağıdaki resimde iki farklı firebug ekran görüntüsü bulunmaktadır. Birincisi kendi web sunucumda host ettiğim jquery dosyasının yer aldığı sayfaya gelen ilk isteğimde sunucudan gelen HTTP sonuç kodu 200 yani dosya var demiş ve dosyayı istemciye (kullanıcı browseri) transfer etmiştir.

İkinci ekran görüntüsünde ise yukarıdaki kod parçasında gösterdiğim gibi Google CDN'den eklediğim jquery dosyasını içeren sayfaya gelen ilk isteğimde HTPP sonuç kodu olarak 304 dönüyor yani not-modified yani daha önce girdiğim bir web sitesi (tabiki google cdn i kullanan) sebebiyle cachelenmiş olan jquery dosyasını tekrar transfer etmiyor browserım ve cachlediği dosyayı (jqeury-1.3.2.min.js) kullanıyor.


jQuery document.ready eventi html dökümanında tamamen yüklenmesiyle tetiklenir (window load gibi düşünebilirsiniz.).

Bu event ile jQuery ile register olmak istediğiniz diğer nesnelerin eventlerına kaydolabilirsiniz, dokumanda istediğiniz manipulasyonları yapabilirsiniz. Hızlı bir giriş yapmak için önce eventi nasıl kullanacağımızı görelim.

  <script type="text/javascript"> 

  
    $(document).ready(function(){ 

  
    alert('jQuery document ready eventınden merhaba'); 

  
    }); 

  
</script> 

jQuery document ready olayını gösterir bu olay için çalışacak kod bloğunu bir function olarak tanımladık, function içinde sadece alert ile ekranda standart javascript mesaj kutusu ile bir mesaj gösteriyoruz.

Yukarıda ki yazım şeklini daha kısa şekilde de yazabiliriz. jQuery function'ı olarak bilinen $ işaretine selector (selector kavramında daha sonra sıkça bahsedeceğiz.) olarak document'i vermeden de ready eventinde çalışacak function'ı belirleyebiliriz.

  $(function(){ 

  
  alert('jQuery document ready eventınden merhaba'); 

  
}); 

jQuery ile DOM nesnelerine erişmek $ (jQuery function)'a selector verilir. Selector olarak çeşitli filtrelemeler içeren komplex ifadeler kullanılabilir. (Tüm referans listesine jquery.com'da api documentationdan ulaşabilirsiniz.) Selector olarak bir DOM nesnesi, nesne adı adı, nesne id si de verilebilir.

jQuery function ($ işareti) a bir selector verilip geriye nesne ya da nesneleri döndüğünde yine bir jQuery objesi olarak döner. Yani doğrudan DOM nesnesini dönmez. Bu sayede Fluent Interface denilen tasarım kalıbı da desteklenmiş olur. jQuery nesnesi üzerinden esas nesnesi almak için get methodu kullanılır.

Aşağıda ki şekilde bir HTML dokumanı oluşuralım ve üzerinde işlemler yapalım.

     <form id="form1" runat="server"> 


    <div> 


        Email : 


        <input class="formInputStyle" type="text" name="txtEmail" id="txtEmail" /> 


    </div> 


    <div> 


        <input class="formButtonStyle" type="button" name="btnGonder" id="btnGonder" value="Gönder" /> 


    </div> 


    </form> 

Örnekleri yapmak için şöyle bir senaryomuz olsun; kullanıcı email adresi alanına herhangi bir şey girene kadar Gönder butonu disabled olsun. txtEmail alanına bir giriş yapıldığında Gönder butonu enable olsun.

Öncelikle email input nasıl seçeceğimize bakalım.

jQuery selector olarak bir element adını alırsa (input, div, span, form, ve diğer tüm html elementleri) sayfada ki tüm elementleri seçer ve geriye döner.
Selector bir veya birden fazla nesneyi seçmiş olsun farketmez jQuery selectordan geriye array olara jQuery objectleri döner.

Bu durumda $("input") ile sayfada ki tüm inputları seçebildiğimiz anlamış oluyoruz. Aşağsıdaki kodu çalıştırdığımız sayfadaki input elementi sayısı kadar input elementi döndürdüğünüz göreceğiz. (Eğer bir asp.net webforms sayfasında test ediyorsanız bir tane de hidden input olan viewstate inputu eklendiği için sayısı 1 fazla göreceksiniz tabiki.)

    $(function(){ 


           alert($("input").length); 


    }); 

Disable etmek için html de bildiğiniz gibi input elementinin disabled adında bir attribute'u olması gerekir. Bunu eklemek için jQuery nesnesi üzerinde yer alan attr methodunu kullanacağız attr birinci parametre olarak attribute adını ikinci parametre olarak ise o attribute'a verilecek değeri alır.

Yukarıdaki kod parçacasını çalıştırdığımızda sayfada ki tüm inputların disable olduğunu göreceğiz. Ancak istediğimiz bu değildi. Sadece txtEmail inputunun disable olmasını istiyoruz. Bunu sadece örnek olarak ekledim. Hemen ihtiyacımız olan kod parçasına geçelim.

    $(function(){ 


           //alert($('#btnGonder').length); 


           $('#btnGonder').attr('disabled', true); 


    }); 

Yukarıdaki satırda yorum satırı olarak duran satırı çalıştırdığımızda bir sayısını göreceğiz. Zira # öncekini ekleyip bir DOM elementinin id'sini verdiğimizde sadece o elemeti seçer. attr method ile disabled özelliğini true değeri ile eklediğimiz btnGonder kontrolünun sayfa yüklendiğinde disabled duruma geçtiğini görüyoruz.

Ya disable etmek istediğimiz birden fazla input element olsaydı bunların id lerini tek tek yazarak erişmekten başka bir çözüm, bir ortak nokta bulmamız gerekirdi, ortak nokta olarak css stil sınıflarını kullanabiliriz.

Verdiğim ilk html dokumanında inputlar için seçilmiş formButtonStyle adında bir css sınıfı olduğunu görüyoruz. Bu tamamen benim kendi belirlediğim şekilde verdiğim bir isim.

$(function(){ 
  
           //alert($('.formInputStyle').length); 

  
         $('.formButtonStyle').attr('disabled', true);        
}); 

  

Yukarıda gözüktüğü gibi html elementilerinin class özelliği ile belirlenmiş olan css sınıf adlarına göre seçilebilmesi için sınıf adı önüne . karakteri konarak seçim yaptırılabilir. Bu durumda sayfada bu css sınıfını kullanan kaç tane dom element var ise jquery tarafından seçilecek ve ilgili attribute değeri verilecektir.

Ayrıca Gönder butonuna $(':button') şeklinde de erişebilirsiniz. Bu şekilde sayfada ki tüm button tipinde ki input elementlerine erişebilirsiniz.

jQuery selectors dokumantasyonu için tıklayınız. Bu sayfada tüm seçim yöntemlerini örnekleri ile beraber görebilirsiniz.

Gönder butonunu disable edebilmek için farklı şekillerde erişim sağladık ve disable ettik. Şimdi ise bu butonu email alanna herhangi bir veri girişi yapıldığında aktif hale getirelim. Yani txtEmail alanına bir giriş yapıldığında çalışacak bir method ile txtEmail değerine bakıp butonu disable edelim ya da enable edelim.

    $(function(){ 


           $('#btnGonder').attr('disabled', true); 


        
           $('#txtEmail').keyup(function(){ 


            if ($('#txtEmail').val().trim()==""){ 


                 $('#btnGonder').attr('disabled', true); 


            }else{ 


             $('#btnGonder').removeAttr('disabled'); 


            } 


           }); 


    }); 

İlk satır disable etmek için kullandığımız satır, devamında ise txtEmail elementinin keyup eventinde çalışacak functionı belirliyoruz. Dikkat ederseniz ana jQuery document ready functionı içinde başka bir eventda çalışacak bir function daha oluşturuyoruz. jQuery documentationdan bind() methodu inceleyerek bu eventi nasıl document ready dışında tanımlanmış bir function ile ilişkilendirebileceğinizi görebilirsiniz. Burada ise val() ile txtEmail in değerini alıyoruz. trim() ile başında sonunda olabilecek boşluk karakterlerini atıyoruz ve kalan değer boş bir string ifadesi ilse tekrar disable ettiğimiz kodu çalıştırıyoruz. Aksi halde yani txtEmail alanı dolu ise removeAttr ile btnGonder üzerinde ki disable attribute'unu silerek butonu enable ediyoruz.


http://docs.jquery.com adresinden jQuery dokumantasyonuna erişebilrisiniz.

Bu giriş yazısından sonra, jQuery ile ilgili pratik kullanıma yönelik yazılarıma devam etmeyi planlıyorum.

Umarım birilerine faydalı olur, geri bildirim ve sorularınız için iletişim formunu kullanabilirsiniz. [ jquery web ]

Visual Studio 2010 Beta 2 - açılış hatası

posted @ Wednesday, October 28, 2009 11:44 PM | Feedback (1)

Visual Studio 2010 Beta 2 ile çalışmaya başladıysanız ve açmaya çalıştığında program başlatılamadı gibi bir hata mesajı verip açılmamaya başladıysa ilk yapmanız gereken Event  Log kayıtlarını kontrol etmek olmalıdır. Aşağıdaki hata mesajlarını veya benzerlerini görüyorsanız. Visual Studio 2010 Beta 2 userdata bozulduğu için açılmıyor olabilir. Neden bozulur? Nasıl bozulur derseniz muhtemelen bir bug'dan ötürüdür.

Ben hata ile ilgili araştırma yaparken bir bug report buldum. Microsoft devenv.exe /resetuserdata komutunu bir kere çalıştırıp userdatayı sıfırlamayı önermiş. Denedim ben de çalıştı. Aynı hata ile karşılaşanlar var ise tekrar kurmadan (repair etmeden) önce bu şekilde bir kere çalıştırmayı denemenizi tavsiye ederim.

.NET Runtime Optimization Service (clr_optimization_v4.0.21006_32) - 1>Failed to compile: Microsoft.VisualStudio.HpcDebugger.Impl, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a . Error code = 0x80070002

.NET Runtime Optimization Service (clr_optimization_v4.0.21006_32) - 1>Failed to compile: C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\Microsoft.Windows.Design.Platform.Silverlight.dll . Error code = 0x80070002
[ visual studio ]

firebug lite sürümünü IE içinde kullanmak (firebug lite in Internet Explorer)

posted @ Tuesday, October 27, 2009 5:12 PM | Feedback (0)

http://bit.ly/firebugliteinIE adresinde adım adım nasıl ekleneceğini gösteren kısa bir screencast ekledim.

video da çalıştırdığım javascript kodu :

var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'http://getfirebug.com/releases/lite/1.2/firebug-lite.js';
 document.getElementsByTagName('head')[0].appendChild(script); 
 firebug.init(); 

[ firebug web ]

CSS Usage - Firecookie - FireQuery

posted @ Sunday, October 25, 2009 2:13 PM | Feedback (0)

Firefox ile beraber web developerların vazgeçilmez aracı haline gelen Firebug'ı kullanıyorsanız, zaten kendisi bir firefox eklentisi olan Firebug için de eklentiler kurabildiğinizi muhtemelen biliyorsunuzdur.  Aşağıda benim favorilerim olan Firebug eklentilerim var. Bir web developer iseniz ve eğer daha önce kullanmadıklarınız var ise hiç düşünmeden tıklayın kurun.

CSS Usage
CSS kurallarınızın sitenizin ne kadarını kapsadığını, ve hangi kuralların kullanılıp/kullanılmadığını gösteren bir FireBug eklentisi.
CSS Usage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.
https://addons.mozilla.org/en-US/firefox/addon/10704

Firecookie
Firebug üzerinden cookie leri görmek ve değiştirmek için.
Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser
https://addons.mozilla.org/en-US/firefox/addon/6683

FireQuery
Firebug enhancements for jQuery (requires Firebug 1.3+)
https://addons.mozilla.org/en-US/firefox/addon/12632

FireRainbow
Javascript syntax highlighting for Firebug 1.3+
https://addons.mozilla.org/en-US/firefox/addon/9603

[ jquery firefox firebug web ]

DotnetBlogEngine > Subtext Geçişi - WordPress Qwilm theme customization

posted @ Sunday, September 13, 2009 5:56 PM | Feedback (0)

Subtext ile ilk yazımı yazıyorum. Sitemi dotnetblogengine'den subtext'e geçirirken bir çok detay ile uğraşmak zorunda kaldım, databaseden yaptım. Örneğin dotnetblogengine <tag> elementlerini ekliyordu export ettiği blogml dosyasına. Ancak subtext blogml schemasına sıkı sıkıya bağımlı olduğu için <tag> ları almıyordu. (BlogML schemasında <tag> elementi tanımlı değil!!)

Bunun için önce export edilen xml'i okuyup, tag elementlerini category elementine çeviren hızlı ve kirli olarak nitelendirilebilecek bir araç hazırladım. Örnek kod aşağıda.

private void button1_Click(object sender, EventArgs e)
        {
            Dictionary<string, Guid> tags = new Dictionary<string, Guid>();

            XmlDocument d = new XmlDocument();
            d.Load("test.xml");
            XmlNamespaceManager mgr = new XmlNamespaceManager(d.NameTable);
            mgr.AddNamespace("b", "http://www.blogml.com/2006/09/BlogML");

            XmlNodeList nodelist = d.SelectNodes("/b:blog/b:posts/b:post[b:tags/b:tag/@ref]", mgr);

            foreach (XmlNode postElement in nodelist)
            {
                XmlNodeList tagElements = postElement.SelectNodes("b:tags/b:tag", mgr);
                List<XmlNode> newCatNodes = new List<XmlNode>();
                foreach (XmlNode tagElement in tagElements)
                {
                    string tagName = tagElement.Attributes["ref"].Value;
                    if (!tags.Keys.Contains<string>(tagName))
                    {
                        tags.Add(tagName, Guid.NewGuid());
                    }
                    newCatNodes.Add(d.CreateElement("category", mgr.LookupNamespace("b")));
                    newCatNodes[newCatNodes.Count - 1].Attributes.Append(d.CreateAttribute("ref")).Value = tags[tagName].ToString();
                }
                //bu post altında ki taglar bulundu
                if (tagElements.Count > 0)
                {
                    XmlNodeList catNodes = postElement.SelectNodes("b:categories", mgr);
                    XmlNode catNode;
                    if (catNodes == null || catNodes.Count == 0)
                    {
                        catNode = postElement.AppendChild(d.CreateElement("categories", mgr.LookupNamespace("b")));
                    }
                    else
                    {
                        catNode = catNodes[0];
                    }
                    foreach (XmlNode newNode in newCatNodes)
                    {
                        catNode.AppendChild(newNode);
                    }

                }


            }

            //save all tags as a master category
            XmlNodeList mainCatNodes = d.SelectNodes("/b:blog/b:categories", mgr);
            XmlNode mainCatNode = null;
            if (mainCatNodes == null || mainCatNodes.Count == 0)
            {
                mainCatNode = d.SelectSingleNode("/b:blog", mgr).InsertBefore(
                    d.CreateElement("categories", mgr.LookupNamespace("b")),
                    d.SelectSingleNode("/b:blog/b:posts", mgr)
                    );

            }
            else
            {
                mainCatNode = mainCatNodes[0];
            }
            foreach (var tagItem in tags)
            {
                XmlNode category = d.CreateElement("category", mgr.LookupNamespace("b"));
                XmlNode catTitle = d.CreateElement("title", mgr.LookupNamespace("b"));
                category.Attributes.Append(d.CreateAttribute("id")).Value = tagItem.Value.ToString();
                catTitle.InnerText = ".." + tagItem.Key;
                category.AppendChild(catTitle);
                mainCatNode.AppendChild(category);
            }

            d.Save("test.edited.xml");
        }

 BlogML çıktısı dokumanda yer alan ve daha önceki blog sistemin olan dotnetblogengine de tag olarak yer alan kayıtları category'e çevirdim ve postları bunlarla ilişkilendirdim.

Bunun akabinde post metinleri içindeki picture handlerlerı find and replace ile değiştirerek çözdüm.

Subtext blog sisteminde de tema desteği var. Çeşitli seçenekler indirilen paket içinde yer almakta ancak http://www.subtextskins.com/ adresinden farklı temalara erişilebiliyor. Ben WordPress temaları içinde yer alan şu an görmekte olduğunuz qwilm temasını kullanmayı istediğim için bir süre de bununla uğraşarak bu temayı subtext'e uyarladım. (Henüz tüm styling işlemleri bitmiş de sayılmaz. Daha çok ince ayar/temizlik var.) [ blog dotnetblogengine subtext ]

jQuery : img resize + jQuery thickbox plugin

posted @ Sunday, September 13, 2009 5:51 PM | Feedback (0)

Yeni tasarımım da content yani içeriğin yer alacağı bölüm genişliği paddingler vs. düşüldüğünde 440px civarında olması gerekiyor. Eski tasarımda ise aşağıdaki resimden de hatırlayacağınız gibi sayfa 100% kullanıldığı için sorun olmuyordu.

Ancak yeni tasarımı bozan bir durum olduğu için jQuery ile şöyle bir şey yapmaya karar verdim.

Sayfada belirlenmiş (440px) değerden geniş olan <img> etiketlerini resize edelim. Bunu yaptım, gayet kolay oldu ancak istendiğinde (tıkladığında) resimin büyük halini de görmek isteyecektir kullanıcı, aksi durumda bazı resimler küçük gösterildiğinde anlamsız şekilde duracaktır sayfada.
Bunun için jQuery ile resize işini yaptıktan sonra çok bilinen ve kullanıclan thickbox isimli jQuery pluginini kullandım.
Ancak thickbox yazısına tıklayınca eriştiğiniz sayfada da göreceğiniz gibi aşağıdaki şekilde bir tanımlama istemektedir.

Benim sitemde ise resim dosyaları etrafında <a> olmayan birer <img> etiketidir. Genelde ekran görüntüsü vermek için eklerim. Yani bu yukarıda ki gereksinime uyan bir yapı zaten yok. Yazıları tek tek düzenlemek olacak iş değil! Onun yerine aşağıdaki jQuery kod ile tüm işlerimi hallettim. Bu yazıda aşağıda ki resim dosyasına tıkladığınızda thickbox ile açılacaktır ancak resmi eklerken thickbox için ekstra bir şey yapmadım. Bu durumun eskiden kalan yazılar için doğru olduğunu yenisi için çok doğru bir tercih olmayacağını belirtmek isterim zira büyük boyutlu resim dosyası görüntülenmek istenmeden önce yüklenmiş oluyor.

var maxContentPictureWidth = 440;
$.fn.zoomIn = function() {
    var orgWidth = $(this).width();
    if (orgWidth <= maxContentPictureWidth) { return; }
    var orgHeight = $(this).height();
    var times = maxContentPictureWidth / orgWidth;
    $(this).width(orgWidth * times);
    $(this).height(orgHeight * times);
    $(this).css("cursor", "pointer").css("cursor", "hand"); //browsers!!
    var wrapperAnchor = document.createElement("a");
    $(wrapperAnchor).attr("href", $(this).attr("src"))
           .attr("title", "preview")
    .addClass("thickbox")
    .attr("id", "created" + Math.floor((Math.random()*100)).toString() );   //flagged as created at runtime!!
    $(this).wrap(wrapperAnchor);
}
$(function() {
    $("#content img").each(function() {
        $(this).zoomIn();
    });
    tb_init("a.thickbox[id^='created']");    

});

Tabiki bu kodların çalışabilmesi için jQuery ve thickbox javascript dosyalarını sayfanıza dahil etmeniz gerekmektedir.

---

[ jquery ]

Mono Touch ile IPhone üzerine C# ile uygulama geliştirin

posted @ Wednesday, September 09, 2009 2:02 PM | Feedback (0)

IPhone cihazları üzerine MonoDevelop'u kullanarak C# ile uygulama geliştirebileceğiniz bir SDK varmış, Mono Touch.

WiSDK'yı alpha isteğime hale yanıt gelmedi, henüz betası da çıkmadı. Mono Touch ile C# ile geliştirme yapabiliryoruz ancak Mac üzerinde XCode ya da Mono Develop kullanmamız gerekiyormuş. VMWare içinde çalışan bir Mac OS X ile MonoDevelop üzerinde bir şeyler geliştirmeye çalışacağım bakalım. Önce şu IPhone SDK downloadunun bitmesini bekliyorum :)

Mono Touch için url ; http://www.mono-project.com/MonoTouch

Mono Touch ile bir Hello World uygulaması : http://www.mono-project.com/MonoTouch_Tutorial_MonoDevelop_HelloWorld  (Öyle ya da böyle Mac OS üzerinde C# kodu görmek güzel.)

[ iphone ]

Windows iPhone Software Development Kit |

posted @ Monday, September 07, 2009 1:50 PM | Feedback (2)

Windows üzerinden IPhone cihazlarına uygulama geliştirmek için resmi olarak desteklenen bir araç yok ancak unoffical şekilde geliştirilen bir proje varmış.

Windows iPhone Software Development Kit

Henüz Alpha sürümünde ve downloada açık değil ancak email ile talep edebiliyorsunuz. Ben istedim bakalım Beta olmadan gönderirlerse deneyeceğiz. (Bir de IPhone almak gerekecek tabi.:))

Beta sürümünde public download linki vereceklermiş sanırım. Şimdiden fikir sahibi olmak isteyenler için. 

http://wisdk.c.la

 

[ iphone ]

univera blog yayında.

posted @ Sunday, September 06, 2009 1:49 PM | Feedback (0)

İzmir'de faaliyet gösteren Univera yazılım ekibi kendilerine bir blog açmışlar.

Univera yazılım müdürü Deniz Kılınç (@denizkilinc) aracılığı ile bugün haberdar oldum.

Sitelerinde yer alan developerdan olunca buna da şükür dedirten bir şiiri de paylaşmak istiyorum. (:

Projelere Karşı Yapayalnız

Test edip yazmasam da unuttum seni sanma
Panorama bir yanaaa Central bir yana
Hasta ettin beni kendine sonra da update ettin gizlice
Aradım seni db’de hiç kimselere soramadım

Bekledim dön diye kilitledin bile bile
Bile bile foreign key’i korkundan silemedin.
Test edip bulamasamda unuttum seni sanma sakın
İşleme bi yana hazırlama bir yana

Projelere karşı yapayanlız böyle de olmaz ki
Nasıl da deadlock’a düştün insafsız böyle de kilitlenmez ki
Unuturum sanmıştım mobilim
Gözüm sdf’lerde kaldı.

Idh’ın gelir bana hallederim nasıl olsa
Bilirim distribütördesin ne hazırladın ne işledin
Aklım fikrim mobil’de gpslesende gpslemesen de
Seni hiç güncellemedim güncellemeyi hiç sevmem

http://univera-ng.blogspot.com/ adresinden blogu takip edebilirsiniz.

[ blog ]

ASP.NET MVC ilk proje ve proje yapısı

posted @ Sunday, August 16, 2009 5:51 PM | Feedback (5)

Yeni bir ASP.NET MVC projesi oluşturmak

asp.net/mvc/download adresinden mvc framework kurulumunu indirip kurduktan sonra, VS 2008'de new project seçeneğini seçtiğiniz de ASP.NET MVC Application seçeneğinin belirdiğini göreceksiniz.

File>New Project seçeneklerinden ASP.NET MVC Application seçip yeni bir asp.net mvc framework projesi oluşturalım ve proje template ile beraber gelen yeni dosyaların neler olduğuna bakalım.



Yukarıdaki resim de ben de ASP.NET MVC 2 Application da gözükmektedir. Bu proje türü daha önceki makalemde bahsettiğim ASP.NET MVC 2 Preview 1 sürümü ile gelen proje türüdür. Proje tipi adında ki versiyon numarası sayesinde iki proje tipi de aynı bilgisayarda çalışabilmektedir.




Sonraki makalelerimiz de MVC Routing, Strongly-Typed View, kullanıcı girdilerini almak ve oluşturmak gibi konuları inceliyor olacağız. [ asp.net mvc makale ]