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 İle Güvenlik Kodu Yapımı

Bir üye girişinde genelde 2 form alanı vardır.Kullanıcı Adı & şifre buna bir de Güvenlik alanı ekliyoruz ve diğer sayfada güvenlik şifresini kontrol ediyoruz.Uygulama 2 asp dosyasından oluşmaktadır.Kodlar üzerinde küçük oynamalarla kendinize göre düzenleyebilirsiniz. Form.asp 01 <% 02   03 ‘Güvenlik parolasının uzunluğunu 1. satırdan 04 ‘Parola içinde harf olup olmayacağını 2. satırdan 05 ‘Parola içinde sayı olup olmayacağını 3. satırdan 06 ‘Ayarlıyoruz bu arada 1 evet 2 hayır anlamına geliyor (2. & 3. satırlar için) 07   08 ParolaUzunluk=5 09 strHarf=1 10 strSayi=1 11   12 ‘Burada karmaşık bir şifre üretecek fonksiyonumuz var 13   14 Function SifreUret(KarekterMiktari, RakamOlacakmi, strHarf) 15 Harfler=Array(“A” ,”B” ,”C” ,”D” ,”E” ,”F” ,”G” ,”H” ,”I” ,”J” ,”K” ,”L” ,”M” ,”N” ,”P” ,”Q” ,”R” ,”S” ,”T” ,”U” ,”V” ,”W” ,”X” ,”Y” ,”Z” ) 16 Rakamlar=Array(“1″ ,”2″ ,”3″ ,”4″ ,”5″ ,”6″ ,”7″ ,”8″ ,”9″ ) 17 If RakamOlacakmi = “1″ AND strHarf = “1″ Then 18 Kontrol = “3″ 19 ElseIf RakamOlacakmi = “1″ Then 20 TempK = “2″ 21 ElseIf strHarf = “1″ Then 22 TempK = “1″ 23 End If 24 i = DatePart(“s” , Now)+2 : Do While i > j : j=DatePart(“s” , Now) : Loop 25 Randomize Timer 26 For I = 1 To Int(KarekterMiktari) 27 If Kontrol = “3″ Then TempK = Int((Rnd * 2) + 1) 28 If TempK = 1 Then 29 TempPass = TempPass & “” & Harfler(Int((Rnd * 25) + 0)) 30 ElseIf TempK = 2 Then 31 TempPass = TempPass& “” & Rakamlar(Int((Rnd * 9) + 0)) 32 End If 33 Next 34 SifreUret = TempPass 35 End Function 36 ‘şifre üreten fonksiyonumuz bitiyor 37   38 ‘Üretilen şifreyi Ekrana Yazdıracağımız Fonksiyonumuz 39 Function ParolaYazdir(Veri) 40 For i = 1 To Len(Veri) : TBT = Mid(Veri,i,1) 41 Response.Write”" & TBT &”" 42 Next 43 End Function 44 ‘Bu Fonksiyonumuzda Bitiyor 45   46 ‘Session nesnemize şifremizi atıyoruz & sonra yazdırıyoruz 47 Session(“Parola” ) = SifreUret(ParolaUzunluk,strSayi,strHarf) 48 ParolaYazdir Session(“Parola” ) 49 %> 50 <form action=”kontrol.asp” method=”get”> 51 Lütfen yukarıdaki güvenlik kodunu aşağıdaki alana yazınız.<br> 52 <input type=”text” name=”frmParola” size=”20″><input type=”submit”> 53 </form> Gördüğünüz gibi form.asp sayfasının yapısı bu şekilde.Fonksiyonları anlamasanızda olur önemli olan ben bu sayfada işlemi normal yazı şeklinde yazdırdım.Siz belki resim şeklinde yazdırmak isteyebilirsiniz.Ya da sitenizin tasarımına uygun bir hale getirmek isteyebilirsiniz.İşte bu durumları “ParolaYazdir” Fonksiyonundan düzenliyoruz.Ve orda görmüş bulunduğunuz TBT kelimesi her bir parola karakterini temsil ediyor.Yani bunu resimle yapmak isterseniz oraya; <img src=resim_”& TBT &”.gif> gibi bir ifade kullanmanız gerekecek.Peki buradan gelen formu nasıl kontrol edeceğiz. Kontrol.asp 01 <table width=”100%”> 02 <tr> 03 <td width=”50%”>Yazmanız Gereken Parola</td> 04 <td width=”50%”><%=Session(“Parola” )%></td> 05 </tr> 06 <tr> 07 <td width=”50%”>Yazdığınız Parola</td> 08 <td width=”50%”><%=request(“frmParola” )%></td> 09 </tr> 10 <tr> 11 <td width=”100%” colspan=”2″><b><% 12 If Request(“frmParola” )=Session(“Parola” ) Then 13 Response.Write”<font size=” “5″ ” color=” “#008000″ “>Denetimi Geçti</font>” 14 Else 15 Response.Write”<font size=” “5″ ” color=” “#FF0000″ “>Denetimi Geçemedi</font>” 16 End If 17 %></b> 18 </td> 19 </tr> 20 </table>