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.

ASP ile Ajax Kullanımı

ASP ile ajax kullanımı hakkında basit bir işlem yapacağız. XMLHttpRequest nesnesi oluşturup formdaki bir bilgiyi nasıl post edeceğiz öğreneceğiz.

Öncelikle AJAX hakkında bilgi edinmenizi, nedir, neye yarar gibi soruların yanıtını bulmanız gerekmektedir.

Ajax fonksiyonlarını vererek kodlarda gerekli açıklamaları yaparak konuyu anlatıyorum.

function yeni_nesne(){
     var nesneyarat;
     /*@cc_on @*/
     /*@if (@_jscript_version >= 5) try { nesneyarat = new ActiveXObject("Msxml2.XMLHTTP"); }
     catch (e) {
          try { nesneyarat = new ActiveXObject("Microsoft.XMLHTTP"); }
          catch (E) { nesneyarat = false; }
     }@end @*/
     if (!nesneyarat && typeof XMLHttpRequest!='undefined') {
      try {
       nesneyarat= new XMLHttpRequest();
      } catch (e) {
       nesneyarat=false;
      }
     }
     return nesneyarat;
}

function AoL(id,cikti,hedef) {
     var aktifform  = document.getElementById(id);
     var ekranayaz  = document.getElementById(cikti);
     var ciktiver   = new String("");
     var name, value;
          for(var C = 0; C < aktifform.elements.length; C++){
               name  = aktifform.elements[C>.name;
               value = aktifform.elements[C>.value;
               ciktiver += escape(name) +'='+ encodeURIComponent(value) +'&';
          }
     var nesneiste = new yeni_nesne();
          nesneiste.open("post", hedef, true);
          nesneiste.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=iso-8859-9");
          nesneiste.send(ciktiver);
          nesneiste.onreadystatechange = function() {
               if (nesneiste.readyState == 4 && nesneiste.status == 200) {
                    ekranayaz.innerHTML = nesneiste.responseText;
               }
               else { ekranayaz.innerHTML = ''; }
          }
     return false;
}

2 adet fonksiyonumuz mevcut. Birisi XMLHttpRequest nesnesi oluşturuyor, diğeri form bilgilerini post ediyor. XMLHttpRequest nesnesini burada anlatmak çok uzun olacağından sizi WIKI'deki kısa dökümanla başbaşa bırakıyorum. Farklı kullanımları mevcut, fakat ben genelde bu kullanımı tercih ediyorum.

2. fonksiyonumuzda ciktiver adında bir fonksiyon gözünüze çarpıyordur. Bunun amacı Türkçe karakterleri ve post esnasında tanınmayan karakterleri bozmadan gönderip, çıktı alabilmek içindir.

Herkes Turkçe karakter sorunundan yakınır. Eğer sayfanızın işaretleme tipi ile, setRequestHeader'i birbiriyle uyumlu hale getirir ve son olarakta ajax yordam sayfanıza bir charset belirtirseniz hiçbir sorun yaşamazsınız.

Form bilgilerimiz ise şöyle olacak,

<form id="form" onsubmit="return AoL(this.id,'sonuc','ajax.asp')">
     <label for="adsoyad">Adınız Soyadınız</label><br />
     <input type="text" name="adsoyad" id="adsoyad" />
     <input type="submit" value="Gönder" />
</form>
<div id="sonuc"></div>

Burada onsubmit yordamında (sizler değiştirebilirsiniz) 3 olay gerçekleşmekte. Formun id bilgisini gönderiyoruz, gelen sonucun sonuc adlı id'li elementte işlenmesini belirtiyoruz ve son olarak bu bilgiler ajax.asp adlı dosyada işleneceğini bidiriyoruz.

Ajax için elementlerin ID bilgileri çok önemlidir. Post edebilmek içinde form bilgilerine birer name eklememiz gerekir. Aynı olmak zorunluluğu yoktur.

şimdi ise ajax.asp adlı sayfamızı oluşturalım,

<%
     response.charset = "iso-8859-9"
     ad = request.form("adsoyad")
     If Len(ad) < 1 then
          response.write "Adsoyad alanını boş bıraktınız"
     Else
          response.write "Forma yazılan bilgi <strong><u>"&ad&"</u></strong>'dır"
     End If
%>

Bu sayfada pek yabancı işlem yapılmamış. Bir charset atanmış ve post ile gönderdiğimizden aynı şekilde verimizi alıp sınamışız.


Bu örneği sizlere birşeyler çağırıştırması açısından hazırladım. Ajax bu kadar basit mi? Hayır kesinlikle, ve yapılabilir en basit işlem budur. Javascript bilginizi zorlayarak bu mini modülü geliştirebilir daha esnek bir form işlemi hazırlayabilirsiniz.

Bu örneği download etmek için tıklayınız.

AJAX ile Eş Zamanlı Form Kontrolü

Kısaca konuyu anlatmak gerekirse eski usulde form kontrolünde tüm formu doldururdunuz ve bittiği zaman "Gönder" düğmesine basardınız. Eğer girmiş olduğunuz kullanıcı adı veya e-posta adresi başkası tarafından kullanılıyorsa ancak tüm formu doldurup gönderdikten sonra bunu öğrenebilirdiniz. Oysa ki AJAX ile o an doldurmuş olduğunuz metin kutusunu eş zamanlı olarak kontrol edilmesini sağlama imkanınız var. Yani kontrolü, gönder butonuna basmadan önce, form elemanı doldurulduğu anda yapabileceğinizi kastediyorum. Konuyu anlatırken AJAX-TR için hazırladığım ve AJAX Tab Kontrol ismini verdiğim örnek uygulamayı kullanacağım. İsmine "Tab kontrol" dedim çünkü Tab tuşuna basıldığı anda veya kutudan çıkıldığı anda kontrolün yapılışını anlatacağım.


DosyalarUygulamada ana sayfayı oluşturan index.php dosyası, kontrolün yapıldığı ve bilginin gönderildiği kontrol.php dosyası ile eyceks kütüphanesinin dosyaları (loading.gif, eyceks.js) bulunmakta.

İlk Adım Kontrol edeceğimiz formu index.php dosyasında oluşturuyoruz. Sadece bir metin kutusu bize yetecektir. Yanına da yeşillik niyetine parola kutusu koydum

PLAIN TEXTHTML:
<form action="void(0)" method="POST" name="form1">
<table>
<tr><td colspan="2"><b>ÜYE GİRİŞİ</b><br><br></td></tr>
<tr><td width="100">Kullanıcı Adı</td><td width="350">: </td></tr>
<tr><td>Parola</td><td>: </td></tr>
<tr><td></td><td></td></tr>
</table>
</form> 
Dikkat ederseniz kullanıcı adı metin kutusunun onblur olayına kontrol_et() işlemini yapmasını belirttim. Bu kontrol_et() fonksiyonu form bilgisini kontrol.php dosyasına gönderecek olan fonksiyon. Aşağıda bu fonksiyonu açıklayacağım.

Formumuzu hazırladık diyelim. Bizim burada yapacağımız şey kontrol butonuna basılmadan kullanıcı adının girildiği kutuyu, biz parola hanesine geçerken kontrol edilmesini sağlamak. Kontrolde, girilen kullanıcı isminin var olup olmadığına bakılmasını ve kullanıcıyı buna göre uyarmasını istiyoruz.

İkinci AdımAJAX Tab Kontrol'de bu sitenin yazarı eburhan'ın arkadaşımızın eyceks kütüphanesini kullandım.

Bu ikinci aşamada eyceks'i form kontolü yapacağımız index.php dosyasına çağıralım.

PLAIN TEXTJAVASCRIPT:
[/javascript]

Bu işlemi de tamamladıktan sonra sıra geldi <strong>Tab</strong> tuşuna bastığımızda işlemesi gereken javascript fonksiyonuna.

<h3>Üçüncü Adım</h3>
[javascript]function kontrol_et(){
var sc = 'uyeadi='+ document.form1.kullanici_adi.value;
JXP(1, "sonuc", "kontrol.php", sc);
} 

İşte bu kodlarla tabtuşuna basılıp parola kutusuna geçerken eyceks kutuphanesini de kullanarak kontrol.php dosyasına kullanıcı adını POST metoduyla (JXP) yolladık. Gelecek olan cevabı da "sonuc" id'sine sahip elemanda görünecek şekilde ayarladık.

Son AdımSon adım ise kontol.php dosyasını oluşturduğumuz kısım. Bu dosyada kontrolü dilediğiniz gibi ayarlayabilirsiniz. İster veritabanına bağlantı kurun, isterseniz de bir e-posta adresinin uygun yazılıp yazılmadığını kontrol edin. Burası size kalmış. Ben ise sadece 5 tane üye ismi belirledim ve girilen ismin bunlardan birisiyle aynı olup olmadığını kontrol ediyorum. Ne de olsa önemli olan mantığı kavramak

kontol.php

PLAIN TEXTPHP:
isim zaten mevcut :-(</font>';
break;
case "":
echo '<font>isim girmediniz!</font>';
break;
default:
echo '<font color="blue">isim uygun :-)</font>';
}

?&gt;