web tasarım dersleri nerden başlamalı

Web Tasarım günümüzde popülerliğini her geçen gün artıran bir bilişim alanı. İnternetin tüm dünyaya yayılması ve bugün cep telefonlarından, tablet bilgisayarlardan sokaklarda bile ücretsiz şekilde internete bağlanabilmemiz, bu dünyaya olan ilgiyi artırdı. Bu kadar ziyaretçisi olan bir dünyaya, profesyonel iş uygulamaları hızla kaymaya başladı. Bugün artık birçok şirket tüm yazılımlarını internet üzerindeki platformlara taşımaya başladı. Klasik masaüstü yazılımların güncelleme dertleri ve bakım masrafları gerek şirketleri gerekse yazılımcıları web dünyasına itti.      

Bir yazılım geliştirmek istiyorsunuz diyelim, geliştirilen uygulama Windows, Linux, MAC gibi platformlarda çalışabilmeli. Ne yaparsınız, tabi ki web tabanlı bir çözüm geliştirirsiniz. Kullanıcı ister evinden, ister gittiği ülkeden rahatlıkla bağlanabilir, işlerini coğrafi bölgeden bağımsız olarak devam ettirebilir. Aklınızda soru kalmaması için bu uzun girişi yaptım. Peki web tabanlı bir çözüm üretmek için neleri bilmeliyiz?  
Önce HTML(Hypertext Markup Language), yani Veri İşaretleme Dili, bugünlerde HTML5 sürümü ile yeni özellikler kazandırılan web sayfalarının ana görüntüleme dili. Öğrenimi çok kolay ve basit omakla birlikte, pratik yapmadığınızda akılda kalmaz. Çeşitli yazılım geliştirme araçları ile HTML kodları otomatik olarak üretilir. Bu araçlar otomatik üretse de tavsiyem tamamen HTML'ye hakim olmanızdır. 

CSS,(Cascading Style Sheet) ise iyi bir web tasarımcı olmak için elzem olan bir teknoloji. HTML web sayfalarına 

hükmetse de CSS olmadan profesyonel görünümde ve her cihazda çalışan sayfalar hazırlayamazsınız. CSS ile sayfanıızın nasıl bir şabllona yerleşeceğini planlarsınız. CSS ile farklı şablonlar hazırlayıp, görünümü farklı sayfalar üretebilirsiniz. Google arama motoru da tablolar kullanarak hazırlanmış HTML sayf

alarından çok CSS ile biçimlendirilmiş sayfaları sever.

Jquery ise sayfalarına hareket katmak için geliştirilmiş, daha az kod yazarak daha çok iş yapacağınız bir teknoloji. Eskiden kullandığımız JavaScript'in tahtına oturdu, birçok özelliği JavaScript'den alsa da, sürekli yenilenen kütüphanesi ile wenb tasarımcıların vazgeçilmezi haline geldi.

Dinamik dillerden birini (ASP.net veya PHP gibi) de bilmek zorundasınız, zira Jquery istemci tabanlıdır, son kullanıcı Jquery kodlarını inceleyebilir, görebilir ama Jquery hızlıdır. ASP.net, PHP, Perl gibi diller ise sunucuda çalışan ve HTML kodlarını istediğiniz gibi üretmenizi sağlayan teknolojilerdir. Son kullanıcı, ASP veya PHP'nin ürettiği kodları göremez, sadece sunucu bilgisayarda bulunan web sunucu aracılığı ile üretilen HTML kodlarının sonucunu görür. Bu da güvenlik açısından önemlidir.


Dinamik diller, diğer taraftan veritabanı ile de iletişim kurarak, verilerin sunucularda saklanmasını, sorgulanmasını sağlarlar. Web dünyasının hızlı gelişmesi de dinamik dillerden sonra olmuştur. 90'lı yıllarda hazırlanan sadece HTML kodundan oluşan web sayfaları günümüzde tamamen ASP.net ve PHP ağırlıklı dinamik dillerin kullanıldığı sayfalara bırakmıştır.

Peki PHP mi, ASP.net mi öğrenmelisiniz? Diğer bir makalede iki dilin de farklarını anlatıp seçimi size bırakacağım.

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

Çok yakında yayın hayatına girecek yeni bir web projesinde kullandığımız özellik. Sayfada benzer yapıyı sem göksunun makalesinden yararlanarak geliştirdik. Site yayın hayatına girdiğinde bu konu ile ilgili geliştirdiğimiz özelliklerle detaylı bir döküman yazarak sizlerle paylaşacağım.

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. 

SoundexSoundex, 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')
 
DifferenceDifference, 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