İddaa Sistem Kolon Sayısını Hesaplama Algoritması

Daha önce çok iddaa oynadım ancak kupon yaparken herkesin dikkat etmediği bir şey var!

Sistem!…

Hesaplaması biraz karışık gibi gelsede bir iki faktoriyel işleminden başka bir şey değil! Kimse kolon yapmadan önce bunu hesaplamıyor sanırım.

İşinize belki bir gün yarar :))

public static int SistemHesap(int Kolon, int Sistem)
{
int Ust = 1;
for (int X = Kolon; X >= 1; X–) {Ust = Ust * X;}
int Alt = 1;
for (int Y = Kolon – Sistem; Y >= 1; Y–) {Alt = Alt * Y;}
for (int Z = Sistem; Z >= 1; Z–) {Alt = Alt * Z;}
return Ust / Alt;
}

(Gökhan Baltu)

Bunu mu aramıştınız: ASP.NET

Arama motorları hayatımızda pek çok şeyi kolaylaştıran ve bizi aradığımız bilgilere ulaştıran çok önemli bir güç. Bu gücün farkına varan arama motoru geliştiricileri son dönemde kullanıcılarına çok fazla yenilikler sunmaya başladılar. Arama önerileri, bunu mu aramıştınız, fotoğraf arama, dokuman arama vs. bunlardan sadece bir kaçı. Biz bu makalemiz de web uygulamamızda kullanacağımız bir arama motoru hazırlayıp kullanıcılara arama önerileri sunacağız. Yani kullanıcıların yapmış olduğu girişlere uygun sonuç yoksa en yakın sonucu getirip bunu mu aramıştınız diye soracağız.


Örneğe geçmeden önce T-SQL’de bulunan 2 fonksiyonu inceleyeceğiz. Soundex ve Difference. 

Soundex
Soundex, iki kelime arasındaki benzerligi ölçebilmek için bize kelime ile ilgili 4 karakterli bir kod döndüren bir fonksiyondur. Bu kod ile birbirine benzeyen kelimeleri eşleştirebiliriz. Bu eşleşme sonucuna biribirine benzeyen kayıtları elde edebiliriz. Aşağıdaki iki satırıda çalıştırdığımız da aynı sonucu verecek. (Sonuç: S500)

SELECT SOUNDEX(‘Sem Göksu’)
SELECT SOUNDEX(‘Sen Göksu’)

Difference
Difference, Soundex’e benzeyen bir algoritmaya sahip. İki kelime arasında benzerlik oranına göre geriye 0 ile 4 arasında sayısal bir değer döndürür. Bu sonuca göre yapılan aramada benzerlik oranı belli bir değer üzerinde olan kayıtları resultset içerisine alabiliriz.

SELECT DIFFERENCE(‘ASYA GÖKSU’, ‘AYSA GÖKSU’)

Bu iki fonksiyon ile, bunu mu aramıştınız özelliğini arama motorumuza ek özellik olarak katabiliriz. Bunun için bir örnek bir proje hazırlayalım. Örneğimizde kullanabileceğimiz bir veritabanı ve tablo hazırlayalım. Benim veritabanım adı Bing, içerikler için kullanacağım tablomun adı da Contents olacak. Tablo içerisinde de 3 alanım olacak: ContentID, Title, Description. (Ben örnek basit olsun diye fazla alan kullanmadım. Siz kendi projelerinizde farklı alanlarda da kullanabilirsiniz)


Tablo içerisindeki kayıtlar da aşağıdaki gibidir.


Bir ASP.NET projesini oluşturalım. Arama sayfamızın HTML kodları aşağıda gibi olacak. 

<div>
     <asp:TextBox ID=”txtKeyword” runat=”server” Width=”320px”></asp:TextBox>
     <asp:Button ID=”btnSearch” runat=”server” Text=”Ara” OnClick=”btnSearch_Click” />
     <p><asp:Literal ID=”ltlResultText” runat=”server”></asp:Literal></p>

<asp:Repeater ID=”rptResults” runat=”server”>
     <HeaderTemplate>
          <table>
     </HeaderTemplate>
     <ItemTemplate>
          <tr>
               <td>
                    <asp:HyperLink ID=”hypTitle” runat=”server” NavigateUrl=”#” Text='<%# Eval(“Title”) %>’></asp:HyperLink>
          </td>
          </tr>
          <tr>
               <td>
                    <asp:Literal ID=”ltlDescription” runat=”server” Text='<%# Eval(“Description”) %>’></asp:Literal>
               </td>
          </tr>
     </ItemTemplate>
     <FooterTemplate>
          </table>
     </FooterTemplate>
</asp:Repeater>

</div>

Arama sonuçlarını görüntülemek için butona tıkladığımızda yapacağımız işlemleri yapalım. Ben 2 ayrı metot yazdım. Search ve DidYouMean. Search metodu buton altından çağırılacak. Eğer search metodu arama ile ilgili kayıt bulursa kayıtları listeleyecek. Kayıt bulamazsa DidYouMean isimli metodu çağıracak ve aramaya uygun en yakın kayıt getirilip kullanıcıya arama önerisinde bulunulacak. Arama önerilerini yapmak için de DidYouMean metodu içerisindeki sorguda Diffrence fonksiyonunu kullanacağım. (Diffrence fonksiyonunu kullandığımız için Soundex’e gerek kalmadı. O yüzden bu makale de soundex’i kullanmayacağım,. Daha ileri seviye bir uygulama yaparken ikisini de kullanabiliriz. ) 

protected void btnSearch_Click(object sender, EventArgs e)
{
       Search(txtKeyword.Text.Trim());
}

[Search() Metodu]

public void Search(string keyword)
{
    SqlConnection cnn = new SqlConnection(“Server=.; Database=Bing; Trusted_Connection=yes”);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = “Select * From Contents Where Title Like ‘%’ + @Keyword+ ‘%'”;
    cmd.Parameters.AddWithValue(“@Keyword”, keyword);
    cmd.Connection = cnn;
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);
    if (dt != null && dt.Rows.Count > 0)
    {
        rptResults.DataSource = dt;
        rptResults.DataBind();
    }
    else
    {
        DidYouMean(keyword); // Bunu mu aramıştınız metoduna çağrıda bulunuyoruz.
        rptResults.DataSource = null;
        rptResults.DataBind();
    }
}

[DidYouMean Metodu]

public void DidYouMean(string keyword)
{
    SqlConnection cnn = new SqlConnection(“Server=.; Database=Bing; Trusted_Connection=yes”);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = “Select top 1 * From Contents Where DIFFERENCE(Title, @Keyword) >=3”;
    cmd.Parameters.AddWithValue(“@Keyword”, keyword);
    cmd.Connection = cnn;
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);
    if (dt != null && dt.Rows.Count > 0)
    {
        ltlResultText.Text = string.Format(“Bunu mu aramıştınız: <u style=’color:red’>{0}</u>”, dt.Rows[0][“Title”].ToString());
    }
    else
    {
        ltlResultText.Text = “Arama kriterlerinize uygun sonuç bulunamadı.”;
    }
}

Tablodaki kayıtlarımıza uygun bir arama yapalım. Örneğin, Alex yazalım ve sonuca bakalım.


Hatalı bir arama yapalım. Örneğin, Alex Le Sonsuza.

T-SQL’de Difference komutunu kullanarak kullanıcılara benzer sonuçlara göre arama önerileri sunmuş olduk. Makalemizin sonuna geldik, bir sonraki makalede görüşmek üzere. ASP.NET ile kalın J

Sem GÖKSU
askisem@hotmail.com 

İlk Windows 8 HTML5 Metro Uygulamamız

Build konferansı ile beraber biliyorsunuz artık yeni Windows 8 METRO arayüzünde HTML5 uygulamalarının da çalışabileceği haberi kesinleşmiş oldu. METRO arayüzünde HTML5 ve JS, XAML ve C# veya VB veya C++ beraberce kullanılabiliyorlar. Bu noktada biraz özellikle HTML5 tarafına değinmek istiyorum. Değinirken aklımdaki soruları ve kendi bulduğum bazı cevapları sizlerle paylaşıp biraz da yorumlarınızı dinlemek istiyorum desem doğru olur. Arada da JavaScript WinRT ilişkisine bir giriş yapmış oluruz.

HTML5 = Cross Platform

Aslında bu başlığı atmadan önce şu soruyu sormak lazım: “HTML Cross-Platform mu?” Yani HTML5’den falan bahsetmiyorum. Şu an elimizde var olan HTML Cross-Platform mu? Aslına bakarsanız evet. Bugün HTML ile yapılmış bir site arayüzü kabaca her telefonda, tablette ve bilgisayarda  / işletim sisteminde açılıyor / çalışıyor. Tabi burada konunun biraz detayına girersek hepimiz de biliyoruz ki HTML’in her cihazda aynı şekilde görünebilmesi için birkaç takla atmamız gerekiyor. Ama zaten bu sorunu hoş görmeyi öğrenmiş bir şekilde doğmadık mı biz? 🙂

Peki konu HTML5 olunca birşey değişecek mi? Aslında pek değişmeyecek. Yani bugün HTML ile ilgili var olan sorunlar yine HTML5 ile de var olmaya devam edecek. Diğer yandan da şu anda nasıl HTML bizim “en cross-platform” gidebilen teknolojimiz ise, HTML5 de öyle olacak. Ama ufak bir fark var…

Uygulamalar ve Siteler

Bugüne kadar HTML kullanımımız site yapmakla alaklıydı. Yani veri göstermenin ötesinde pek birşey yapmıyorduk. En fazla bir basit bir kutuya (TextBox) metin alırız sonra HTML sunucuya gider ve yenisi gelir. HTML ile tarayıcı içi uygulamaya yazmaya başlamamız şurada 10 yılı geçmez. JavaScript / AJAX vs ile beraber HTML biraz canlanmaya başladı ve biz bu yolda da birçok sorun yaşamadık. Başımıza bir de JavaScript’in Cross-Platform olma derdi çıktı ve bire bir aynı kolaylıkları ve zorlukları JavaScript ile de yaşadık. Buna rağmen sadece içerik gösteren cross-platform web sitelerinden istemci tarafında tepki verebilen ve yaşayan cross-platform web uygulamalarına geçiş pek de sancılı olmadı. (Esas sancıyı şimdi göreceğiz :))

Önümüzdeki dönemde HTML’i çok daha farklı bir gelecek bekliyor. HTML5 ve JavaScript Windows 8 ile beraber Windows Metro UI uygulaması olarak çalışıyor. Metro UI içerisinde bir Silverlight uygulaması ile HTML5 uygulaması arasındaki farkı kullanıcıların anlama şansı yok. Kulağa ne kadar hoş geliyor değil mi? Sanırım aynı hayali paylaşıyoruz? HTML5+JavaScript ile yazacağım bir uygulama Windows 8’de MetroUI’da çalıştığı gibi yarın iPhone5’te HTML5 destekli tarayıcı da çalışacak…. mı?

Cross Platform Uygulama (Ütopyası)

Başlıktan sanırım nereye gideceğimizi anladınız ama etkilenmemeye çalışın 🙂 Amacım sizleri de düşünmeye itmek ve kesinlikle yorumlarınız duymak. Sonuç itibari ile ben de iki gün önce izlediğim bir Keynote sonrasında kafamda toparlananları döküyorum şu anda ortaya.

Konumuza dönersek 🙂 Hepimizin hayali (en azından benim öyleydi) HTML5’in Windows ortamında doğal bir uygulama geliştirme platformu olması ile beraber tek bir uygulama geliştirip her platformda çalıştırabiliyor olmak. Peki bu gerçekten olabilecek mi? Gelin basit bir Windows 8 HTML5 uygulamasının kodlarına göz atalım.

[HTML5]

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>WinWebApp3</title>     <!-- WinJS references -->     <link rel="stylesheet" href="/winjs/css/ui-dark.css" />     <script src="/winjs/js/base.js"></script>     <script src="/winjs/js/wwaapp.js"></script>     <!-- WinWebApp3 references -->     <link rel="stylesheet" href="/css/default.css" />     <script src="/js/default.js"></script> </head> <body> <div style="height: 253.57px; width: 374.11px;"> <button id="Dugme" style="position: absolute; top: 210px; left: 100px;">Deneme</button> <img id="Foto" style="height: 200px; width: 200px;"></div> </body> </html> 

Tüm JavaScript referanslarını bir kenara koyalım. Sonuçta onları diğer platformlarda bir işe yaramasa da sorun yaratmayacaktır. Orta kısma baktığımızda da pek bir sorun görmüyoruz. Yani şimdilik HTML5 kısmı ile ilgili bir sorun yok. Tabi tüm bunları yaparken uygulamanın basitliğini akılda tutmakta fayda var. Ortada sadece bir düğme ve bir de resim nesnesi var. HTML5 ile ilgili MetroUI’da kullanılan bazı elementlerinin daha W3C’nin draft listesinde olduğunu ve her tarayıcı tarafından daha implemente edilmediğini es geçiyorum. Bunlar zaten yazının başında bahsettiğimiz “HTML’in bildiğim, alıştığımız sorunları” listesine dahil.

Şimdi gelin bu uygulamanın JavaScript koduna geçelim. JavaScript kodu içerisinde amacımız düğmeye basıldığında kullanıcının bilgisayarından bir resim almak. Bunun için bir WinRT call başlatıp MetroUI’da Windows 8 ile beraber, işletim sisteminde gelen “FileOpenPicker”ı çalıştırmamız gerek. Aslında bunun Winforms’daki OpenFileDialog’dan pek farkı yok. OpenFileDialog’un MetroUI’cası açılacak 🙂 Uygulamamızı JavaScript ile geliştirdiğimiz için bizim bu WinRT call’u JavaScriptten yapmamız gerek.

[JavaScript]

        var openPicker = new Windows.Storage.Pickers.FileOpenPicker();         openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;         openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;         openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

Yukarıdaki basit kod bir FileOpenPicker yaratıp açılabilecek dosyaların tiplerini vermekten öteye geçmiyor. Açılan FileOpenPicker’da varsayılan konum olarak “MyPictures” klasörünün gösterilmesini ve gösterilen resimlerin de thumbnail olarak listelenmesini sağlıyoruz.

Bu uygulamamızı birazdan tamamlarız ve açtığımız resmi HTML5’teki Image nesnesine aktarırız ama onun öncesinde koda tekrar bir bakıp ne kadar Cross-Platform olabileceğini bir düşünmenizi istiyorum 🙂 “Windows” ile başlamıyor mu bu API’ler? Yani özetle OpenFileDialog açma şeklinizden tutun cihazın Accelerometer’ına ulaşmaya kadar birçok “HTML5 sitenizi HTML5 uygulaması’na” çevirecek özellik platform bağımlı olmak zorunda kalacak. Özellikle bu API’lerle W3C’nin pek de ingilenmediğini düşünürsek bunların standardlaşması çok zor gözüküyor.

Bu örnek genel resmi görmekten uzak, çok basit bir örnek oldu. Uygulamalarınız karıştıkça kullandığınız şeylerin hem HTML5 tarafında hem de JavaScript tarafında giderek platforma özel hale geldiğini göreceksiniz. Bunun nedenlerinden biri kullanılan bu özelliklerin bazılarının diğer platformlarda veya işletim sistemlerinde olmaması veya basit bir şekilde sadece farklı API’lerle sunulması olması olabiliyor.

Peki Cross-Platform gerçekten hayal mi?

Aslında bu sorunun cevabı Cross-Platform’a ulaşmakla ilgili nasıl bir beklentiniz olduğuna bağlı. Doğru bir katmanlama ve ayrıştırma ile Cross-Platforma’a yaklaşmak doğal olarak HTML5’te Silverlight’tan daha kolay ama bu bir tıklama ile olacak iş de değil. Maalesef HTML5 de olsa birçok cross-platform senaryonuzda bolca if’ler kullanacağınızdan emin olabilirsiniz.

Özetle benim görüşüm MetroUI ve Windows 8 ile beraber gelen HTML5’in bir Cross-Platform mucizesinden öte Cross-Platform hayali yolunda ufak bir adım oluşturarak süreci biraz kolaylaştıracağı yönünde. Ama bunun kesinlikle (maalesef) minör bir adım olduğunun farkında olmak önemli. Diğer yandan tabi ki özellikle HTML ve JavaScript guruları için Windows platformuna ve MetroUI’a geçmek için bu çok önemli bir fırsat.

Uygulamamızı bitirelim 🙂

Şimdi şu fotoğraf seçip açacağımız uygulamamızı bitirelim. Fotoğraf açma işlemi için açtığımız OpenFilePicker Windows 8 Metro arayüzünde yeri geldiğinde harici kaynaklara da ulaşabiliyor. Yani OpenFilePicker’dan kullanıcıların başka bir uygulamaya zıplamış ve oradan resim seçiyor olabilirler veya belki de internet kaynaklı bir yerlere zıplamışlardır. Özetle OpenFilePicker internetteki kaynakların da seçilebilmesine olanak tanıyor. Bu senaryoda bizim dosya açma işlemimiz uzun sürebilir. O nedenle dosya açma işlemi default olarak asenkron bir işlem olarak karşımıza geliyor.

[JavaScript]

        openPicker.pickSingleFileAsync().then(function (file) {             if (file) {                 var Dosya = URL.createObjectURL(file);                 document.getElementById("Foto").src = Dosya;             }         });

Yukarıdaki kod içerisinde pickSinbleFileAsync metodu çalıştırıldıktan sonra then diye bir komut daha göreceksiniz. İşte bu Async Framework’deki wait metodu gibi çalışıyor. Yani eğer bir metod asenkronsa sonrasında then diyerek veridğiniz işlemler o asenkron metod tamamlandıktan sonra çalışıyor. Bir diğer örnekle aslında asenkron çalışan bir yapının Completed gibi bir eventi varsa otomatik olarak onu bekleyip onun eventin listener’ında işlem yapmak gibi bir çalışma yapısından bahsediyoruz.

Bizim Async işlem bittinten sonra parametre olarak gönderilen file objesinden bir ObjectURL yaratmamız gerekiyor. O işlemi de yaptıktan sonra doğrudan HTML’deki Image nesnemizi bulup source’una eldeki dosyayı veriyoruz. Böylece JavaScript’ten bir Windows Runtime (WinRT) API’sini çağırmış olduk.

Hem ilk JavaScript’ten WinRT Call’umuz 🙂 hem de HTML5’in gidişatı ile ilgili beyinlerinize diktiğim şüpheler hepinize hayırlı olsun 😀

Görüşmek üzere!

Bu makale Visual Studio 11 Express for Windows Developer Preview 
ve Windows 8 Developer Preview Build 8102 kullanılarak yazılmıştır

Web Tasarımlarında Renklerin Ahengi

Bir web tasarımın ön grafik tasarımı yapılırken en önemli nokta birbiri ile uyumlu renkleri yakalayabiliyor olmaktır. Genel olarak sanat olarak nitelendirebileceğimiz bu ahengin aslında kısmen de olsa matematiksel sistemlerle de tanımlamak mümkün. Sıcak ve soğuk renklerin birbirleri ile veya kendi içlerindeki uyumları ile ilgili geliştirilmiş derin araştırmalara ve algoritmalara girmeyeceğim. Biraz daha pratiğe yönelerek aşağıda adresi yer alan siteyi ziyaret etmenizi rica ediyorum.

http://www.todotoh.com/rgb/rgbanalysis.aspx

Site, kendisine verilen başka bir adresteki web sitesinin ekran görüntüsünü alarak söz konusu web sitesinde ağırlıklı olarak kullanılmış olan renklerin bir şemasını çıkartıyor. Şemayı çıkartırken hemen kullanabilmeniz için Hex kodlarını yaratmayı da unutmuyor. Böylece beğendiğiniz web sitelerinin renk şemalarını elde edebiliyor ve birbiri ile uyumlu renkleri anında yakalamış oluyorsunuz. Bahsettiğimiz web sitesi John K. tarafından benim “How to take screenshot (thumbnail) of a web site with ASP.NET 2.0?” makalemdeki kod üzerinden gidilerek geliştirildi. (Umarım bir gün söz konusu makaleyi Türkçe’ye çevirmek için zaman ayırabileceğim)

Sizlerle tanıştırmak istediğim bir diğer web uygulaması da www.colormatch.dk sitesinde yer alıyor. Seçilen bir renk üzerinden otomatik olarak uyumlu renkleri bulmayı amaçlayan web sitesinin gerçekten başarılı bir iş çıkardığını söyleyebilirim.

Mayasoft Bilişim Akademi’sindeki son Web Tasarım sınıfımdan öğrencim sevgili Ersin Kılıç’a beni colormatch.dk ile tanıştırdığı için buradan ayrıca teşekkür etmek istiyorum.

(Daron Yöndem)

Adobe Edge ile HTML5’e Erken Bir Bakış

Son zamanların ciddi popüler konularından biri HTML5 🙂 Aslında bu konuda konuşacak çok şey var. Danışmanlıklarımın %90’ında HTML5 soruları aldığımı itiraf etmem gerek. HTML5’in geleceği, gerçekten ne kadar cross-platform olduğu, Microsoft’un HTML5 yaklaşımı, HTML5 ile “phonegap” vs ile cross-platform mobile app development hikayesi vs… Bunlar karışık konular ve itiraf etmek gerekirse bu konularda sizlere net cevaplar vermek yerine aslında mevcut manzarayı görmenizi ve kendi değerlendirmenizi yapabilmenizi tercih ederim.

İşte tam da bu çerçevede son zamanlarda giderek daha da sesi çıkan Adobe’nin HTML5 designer editörü Adobe Edge’den bahsetmek istiyorum. Eski bir ACP (Adobe Certified Professional) olarak uzun süredir Photoshop ve Premier hariç pek Adobe araçlarını kullanmadığımı itiraf etmem gerek. Silverlight’ın kuvvetlenmesi ile beraber makineme Flash yüklememeye başlayalı sanırım üç yıl oluyor. Peki nedir bu Edge? Aslında bu soruya gelmeden önce birkaç bilgi daha veriyim 🙂

  • Adobe Flash’ı mobil platformların için geliştirmeyi bırakacağını duyurdu.
  • Adobe Flex’i open source hale getirdi.

Bu iki maddeden yola çıkarak siz ne yorumlar yaparsınız bilemiyorum 🙂 Ama benim gördüğüm manzara Adobe’nin Flash’ı öncelikler listesinde arkaya attığı. Bugüne kadar Open Source yapmayı düşünmediğin birşeyi open source yapmak şirket içi kaynakları azaltmak için bir yöntem midir? Yani acaba Adobe Flash tarafındaki çalışan sayısını ve yatırımını azaltıp onun yerine open source community’sinden destek mi bekliyor bilemiyorum 🙂 Ama bu haberi özellikle aynı dönemde ortaya çıkan mobil’de Flash’tan vazgeçme hikayesi ile birleştirirseniz garip bir kimya oluştuğu bir gerçek. Eh bir de bunun üzerine “Odağımızı HTML5’e yönlendiriyoruz” gibi duyurular çıkarsa 🙂 Adobe Edge’e göz atmanın tam zamanı demektir.

Adobe Edge

Şu an inceleyebileceğimiz Adobe Edge sürümü “Preview 3” yani aynı Windows 8 tarafında ve Expression Blend 5 tarafında da olduğu gibi Alpha / Beta vs değil. Özetle uygulamanın çok daha erken ve ön sürümlerinden birine göz atıyor olacağız. O nedenle pek eleştirel yaklaşmak şu an için mantıklı değil. Onun yerine daha fazla “Neler var?” ve “Adobe nasıl ilerlemeyi planlıyor?” gibi soruların cevabını arayacağız.

Adobe Edge’in Preview 3 sürümünü indirmek için buraya tıklayabilirsiniz.

Aadobe Edge’i ilk açtığımızda yeni bir proje yarattığımız gibi aslında Flash arayüzüne çok benzeyen bir arayüz ile karşılaşıyoruz. Tabi arayüz çok daha basit ve bu eminim ki daha “Preview 3″de olmamızdan kaynaklanıyor.

Adobe Edge Toolbar Preview 3'ün ne kadar "Preview" olduğunun kanıtı.
Adobe Edge Toolbar Preview 3’ün ne kadar “Preview” olduğunun kanıtı.

Yukarıda gördüğünüz basit ekran görüntüsünde Adobe Edge arayüzünden tek araç çubuğunu görüyorsunuz 🙂 Şaka değil “Button” yok. Tabi tekrar etmekten sıkılmadan 🙂 bunun bir “Preview” olduğunu yine hatırlatacağım. Şimdilik özelliklerden çok benim merak ettiğim HTML5 animasyonlarının nasıl yapıldığı ve arka planda nasıl bir kod yaratıldığı.Edge'de ilk animasyonumuz.

Edge’de ilk animasyonumuz.

Deneme amaçlı olarak yola çıkarak ilk animasyonumu yukarıdaki şekilde hazırladım. Flash veya Blend’den alışık olduğumuz Keyframe mantığı bire bir korunmuş durumda. Animasyon yine KeyFrame’ler yaratılarak Frame’lerde Property’ler değiştirilerek oluşturuluyor. Aslında itiraf etmek gerekirse IDE’de anime edilen Property isimlerinin gösterilmesi, sadece anime edilen değişikliklerin kaydedilmesi ve koda yansıması bana daha fazla Blend’i hatırlattı. Malum Flash arayüzündeki yaklaşım Property bazlı değil. Ama aslına bakarsanız Adobe’yi yapıyı bu şekilde kurmaya iten şey arka planda yaratmak zorunda kaldığı kodun yapısı. Flash seçeneğinde kendi SWF formatını compile ettiği için Adobe’nin (veya daha doğrusu Macromedia’nın) o noktada daha özgür olmuş olduğunu söyleyebiliriz. HTML5 konusunda maalesef Adobe aynı özgürlüğe sahip değil.

Animasyon hazırlarken ister ekrande değişiklikler yapıp bu değişikliklerden otomatik animasyon yaratılmasını ve otomatik keyframe eklenmesini sağlayabiliyor ister bu otomatik mekanizmayı devre dışı bırakıp elle tek tek toolbox’dan propertyleri bulup anime edebiliyorsunuz.

Ben örneğimde basit bir Image koyup onu ekranda sağa sola taşıdım 🙂 Animasyonu yaratırken herhangi bir sorun yaşamadım. Herşey süper yolunda gitti. Sonrasında tabi ki arka planda neler oluyor diye proje dosyalarını karıştırmaya başladım.

Basit Edge projesinin dosyaları.
Yeni bir Edge projesinin içeriği.

Ekran görüntüsünde de paylaştığım gibi Edge’in kendi uzantısı ile tanımladığı dosya dışında herşey normal HTML, JavaScript ve CSS. JS dosyalarına baktığımızda hemen jQuery dikkati çekiyor 🙂 Sonrasında Edge’in kendi JS kütüphaneleri var (jQuery Plug-In). Son olarak projenin kodlarını taşıdığını düşünebileceğimiz iki tane de Untitled diye başlayan JS dosyası root klasöre yerleştirilmiş durumda.

Edge dosyasının içinde proje ile ilgili bazı parametreleri tanımlayan bir JSON nesnesi var. Tahmin edeceğiniz üzere projenin çalışması için kritik değil. Daha fazla IDE için bazı bilgiler yer alıyor proje ile ilgili.

Edge projesinin ana HTML dosyası.
Edge projesinin ana HTML dosyası.

Ana HTML dosyamıza göz attığımızda doğal olarak projedeki bütün JS dosyalarının dahil edildiğini görüyoruz. Ek olarak bir de DIV id’si ve Class’ı set edilmiş şekilde ortada duruyor. Herşey bu DIV içerisinde gerçekleşiyor.

Projede aslında bizim IDE’de yaptığımız olayları yansıtan esas JavaScript dosyası ise “Untitled-1_edge.js” dosyasının ta kendisi. Benim örneğimde bu dosyanın içeriğini aşağıda bulabilirsiniz.

[Javascript]

(function ($, Edge, compId) {
var symbols = {
“stage”: {
version: “0.1.3”,
baseState: “Base State”,
initialState: “Base State”,
content: {
dom: [
{
id: ‘vesikalik’,
type: ‘image’,
tag: ‘div’,
rect: [0, 0, 162, 161],
fill: [‘rgba(0,0,0,0)’, ‘images/vesikalik.png’],
transform: [[10, 239]]
}],
symbolInstances: [
]
},
states: {
“Base State”: {
“${_stage}”: [
[“color”, “background-color”, ‘rgba(255,255,255,1)’],
[“style”, “height”, ‘400px’],
[“style”, “width”, ‘550px’]
],
“${_vesikalik}”: [
[“transform”, “translateX”, ‘0px’],
[“transform”, “translateY”, ’99px’],
[“transform”, “rotateZ”, ‘0deg’]
]
}
},
timelines: {
“Default Timeline”: {
fromState: “Base State”,
toState: “”,
duration: 7500,
labels: {

},
timeline: [
{ id: “eid15”, tween: [“transform”, “${_vesikalik}”,
“rotateZ”, ‘360deg’, { fromValue: ‘0deg’}],
position: 4500, duration: 1250 },
{ id: “eid8”, tween: [“transform”, “${_vesikalik}”,
“translateX”, ‘214px’, { fromValue: ‘0px’}]
, position: 0, duration: 2000, easing: “easeOutElastic” },
{ id: “eid17”, tween: [“transform”, “${_vesikalik}”,
“translateX”, ‘235px’, { fromValue: ‘214px’}]
, position: 5750, duration: 1750, easing: “easeOutElastic” },
{ id: “eid12”, tween: [“transform”, “${_vesikalik}”,
“translateY”, ‘239px’, { fromValue: ’99px’}]
, position: 2000, duration: 2500, easing: “easeInOutQuad”}]
}
}
}
};

var comp;
Edge.registerCompositionDefn(compId, symbols);

/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function () {
comp = new Edge.Composition(compId, { stage: “.” + compId }, {});
/**
* Adobe Edge Timeline Launch
*/
comp.ready(function () {
comp.play();
});
});
})(jQuery, jQuery.Edge, “EDGE-294043132”);

Kodu yukarıdan aşağıya incelerseniz, önce bir Stage yaratılıp resmin yerleştirildiğini, sonrasında State ve son olarak timeline’ınyaratıldığını görebilirsiniz. Timeline içerisinde transformasyonların hepsinin From ve To gibi property değerleri üzerinden gittiğine dikkat etmekte fayda var. Bu senaryo zaten SL veya WPF ile uğraşanlar için epey tanıdık gelecektir.

Kodun sonuna doğru yaratılan tüm sembollerin bir CompID ile eşleştirildiğini ve Stage’e konduktan sonra da “play” metodu ile senaryonun başlatıldığını görebilirsiniz.

Durumu özetleyecek olursak 🙂 Edge IDE’sinde yapılan herşey arka planda JavaScript yaratıyor. Yaratılan JavaScript’e hakim olabilmek adına Adobe kendi jQuery plug-inlerini geliştirmiş durumda. İlginç olan şeylerden biri Edge IDE’sindeki toolbardaki nesnelerle çizim yapsanız, örneğin bir dikdörtgen koysanız bile dikdörtgenden tutun tüm çizimlere kadar herşeyi şu an JavaScript ile yaratmaya çalışıyorum. Ben açıkçası bu noktada SVG kullanımı öngörüyordum fakat şu an için yok. Belki ileride olacaktır.

Peki ya direk SVG Import edersek ne olur? diyorsanız orada da hafif bir hüsran var açıkçası. SVG’lere doğrudan Image gibi “asset” muamelesi yapıyor Edge 🙂 Yani SVG içerisindeki objeleri tek tek anime edebilmeyi veya IDE içerisinde SVG’nin iç objelerine ulaşmayı düşünmeyin bile. Şu an için SVG’yi bir DIV’e JavaScript ile background olarak set ediyor 😦

Özetle…

HTML5 ile designer-developer işbirliğini tooling olarak destekleyebilme noktasında ne kadar erken bir çağda olduğumuzu Adobe Edge de destekliyor ve kanıtlıyor… Bu konuda ana iki savaşçı olarak MS de Adobe de kabaca aynı noktada gibi duruyor. Aradaki büyük farklılıklardan biri MS’in elinde kendi tarayıcısı olması ve tarayıcısını da HTML5’i istediği noktaya getirmek için değiştirebiliyor olması 🙂 Tabi bu durum biraz da tehlikeli çünkü MS’in IE’de yaptıkları sonuç itibari ile cross browser olmuyor. Nitekim şu an için baktığınızda çılgın HTML5 implementasyonları daha fazla Windows 8 ile gelen METRO UI’yı hedeflemiş gibi duruyor, genel web ortamını değil. Adobe ise doğal olarak bu riski göze alamaz (MS bu riski METRO dışında alacak mı o da pek belli değil) Adobe’nin yapmaya çalıştığı cross-browser bir çözümü eldeki araçlarla yaratmak. Bu çerçevede doğru bir başlangıç noktasında olduklarını da itiraf etmek gerek.

Aslında Adobe ile MS’i yani Edge ile Blend’i karşılaştırırken ilginç bir nokta var 🙂 Blend’in şu ana kadar çıkan Preview’ları sadece Windows 8 Metro’yu hedefliyor aslında. Yani Blend’in Edge gibi genel web uygulamalarını HTML5 ile hedefleyip hedeflemeyeceği daha pek belli değil. Bakalım önümüzdeki aylar ne gösterecek.

Tavsiye 😉

Microsoft’un HTML5 bakışını incelemek için tavsiyem aşağıdaki iki webcast videosunu izlemeniz 😉 Geleceğe dair ciddi fikir vereceklerinden eminim.

Hepinize kolay gelsin.

(Daron Yöndem)

Web sayfamızda ışıkları söndürme

Herkese merhabalar,

       Bu ilk teknik makalemde, sitelerde çoğu zaman gerek duyduğumuz zorunlu kullanıcı girişleri için bir alternatif yöntem olan sayfayı karartıp, sadece istenen verinin girilmesini sağlayan nesneye odaklandıran bir yöntemin nasıl yapıldığını sizlerle paylaşıyor olacağım.İlk yazım olduğu için kusurumuz var ise affola… :)

Bu işlemler için;

1-Daha hızlı ilerlemek adına jquery1.4.2 sürümünden faydalanacağız.Edinmek isteyen arkadaşlar için link burada

2-Projemizi asp.net ile geliştireceğimiz için visual studio 2010 ile ilerleyeceğiz.(Notepad yeterlidir)

3-Karartmak için kullanacağımız resim dosyasını buradan indirebilirsiniz.

Başlayalım…

burada yapmak istediğimiz şey “dim.png “isimli resmimizi herhangi bir nesnenin olayına bağlı bir fonksiyonda görünür yapmak daha sonra ise başka fonksiyonlarla bunu kaldırmak.

                                                          

 Yukarıda görüldüğü gibi projemize 1 adet webform, yukarıda belirttiğim resim dosyası ve jquery dosyasını eklemiş bulunmaktayız.

default.aspx ile işe başlayalım…

Öncelikle resim dosyasını barındıracak div elementimizi ve kullanıcıya girilmesi zorunlu veriyi girebilmesi için gerekli nesneleri barındıracak div elementimizi ekliyoruz… 

 

Yukarıda görüldüğü gibi 2 ana divimiz görülmektedir.Aşağıdaki css kodlarıyla birleştirerek bakılırsa neyin ne olduğu daha iyi anlaşılacaktır.Özetle “dim” isimli div aslında gizlidir.”content” isimli div ise sitemizde normal durumda gözükecek olan div imizdir.

Css Kodları:

 

sayfamızın arka plan rengini turuncu olarak seçiyoruz.(kararma bariz gözüksün)

dim isimli divimizin özellikleri gözükmekte.

Burada dikkat etmemiz gereken noktalar;

z index : 100

msgbox isimli divimizin z index degeri 200 dür.dolayısıyla msgbox isimli divimz  daha önde gözükecek ve kullanıcı buradan değer girebilecektir.

display:none

divimiz ilk başta gözükmeyecektir.

background-image

dim isimli png resmimiz divimizin arkaplan resmi olacaktır.bu resim yarısaydam ve siyahtır.Dolayısıyla “ışık söndürme” başlığının kaynağı aslında bu koddur ;)

msgbox isimli divimizn css kodlarında açıklanması gereken bir css kodu görmüyorum.(css bilmeyenler için Sayın Fatih Hayrioğlu‘nun sitesini incelemelerini öneririm.)

şimdi bu kodları sırayla açıklayalım:

1=>jquery nin sağladığı kolaylık ile sayfamızın load eventine bir metot bağlıyoruz.

2=>bağlanan metot “dim” isimli divin boyutunu sayfamızın boyutuna eşitliyor.Böylelikle istemcideki tarayıcı boyutu ne olursa olsun uyum sağlanabilmektedir.

3=>sayfamızın resize olayı için bir metot çalıştırıyoruz.Bu metot 2 numaradaki işlemi yapmaktadır.Böylelikle tarayıcı boyutu değiştiği zaman divimizin boyutlarıda otomatik olarak değişecektir.

4=>btnKarart butonunun click olayına bir metot tanımlıyoruz.Bu metot Jquery nin nimetlerinden faydalanarak dim isimli divimizi göstermeye yarayacaktır.

5=>btnTamam(kararınca gözüken buton)  butonunun click olayına bir metot tanımlıyoruz.Bu metot da dim isimli divimizi gizlemeye yarıyor.

(Ali Çavuşoğlu)

Hosting firmanızı seçerken biraz daha düşünün

Şuan bu yazıyı okuyan web tasarımcı  arkadaşlar için bir kaç tavsiye vermek istiyorum.


Şuanda çalıştığım 2 farklı hosting firması ve bunun dışında kendime ait olan bir VDS server bulunmaktadır.Çalıştığım 2 firma  var dedim ama bunlardan 2.cisini yani Natro‘yu aslına bakarsanız fantezi olsun diye aldım.Diğer çalıştığım firma ise maalesef ki isimtescil.Maalesefki diyorum çünkü an itibariyle 23 domainimi barındıran bu firmada ne zaman ki yeni bir site yayına açıcak olsam sürekli acayip acayip hatalar çıkıyor.Buna rağmen niye 23 ünüde oradan aldım inanın bilmiyorum.O kadar abuk sabuk sistemleri varki kafayı yersiniz.Şuanda bu saatte sinirden önümdeki klavyeyi kırmamak için içimi size döküyorum .

Bugün yayına açmam gereken Filibe Koftecisi ‘nin alan adını isimtescildenaldım ve orada boşta bulunan bi hostingime atama yaptırdım panelimden .Orda çalışan bi arkadaş (ismi lazım değil baş harfi B) sen kalk 4 sitenin dns ayarlarını birbirine kat.E tabi benim siteler arasında iç savaş çıktı :) . Open Course Ware Software Engineering adlı sitede dolayısıyla kafayı yedi.Saatler geçti hala sorunu çözemediler adam akıllı.Kaç kişi çalışıyo bilmiyorum orda ama Sertaç ve Volkan adlı çalışanlar dışında hiçbiri sorun çözebilecek  donanıma sahip değiller.