Günümüzde web sayfası tasarımında ya da mimarisinde kullanılan birçok dil ya da betik (script) mevcuttur. Bunlar genelde web teknolojileri olarak anılırlar.Bu yazımda sizlere kavramsal olarak internette birçok yerde adına rastlayabileceğiniz bu teknolojiler hakkında bilgiler vermeye çalışacağım.
Günümüz web teknolojileri ;
1. HTML : Bir web sayfası tasarımında olmazsa olmazlardan ilki html (hyper text markup language) dir. Html dili (“<tag>”) küçüktür ve büyüktür işaretleri arasına eklenen etiket adı verilen İngilizce kısaltmalardan oluşan bir teknolojidir. Bu dil sayesinde internet sayfaları temel olarak tasarlanır. Html içerisine javascript,php,asp,vb. kodlar ile sayfalar daha etkileşimli hale getirilerek günümüz dinamik web sayfaları oluşturulmaktadır. Fakat işin temelinde ve olmazsa olmazı html’dir. HTML4.01 versiyonunun ardından yaklaşık 20 yıl sonra gelen yeniliklerle HTML5.0 yavaş yavaş ortaya çıkmaktadır.
2. Javascript : Buradaki script kelimesi “betik” anlamına gelmektedir. En yaygın yanlışlardan birisi de JAVA programlama dili ile javascriptin birbirine yakınmış gibi gösterilmesidir. Fakat bunları yaratan firmalar bile farklıdır. İsim benzerliğinden başka hiçbir benzerlik yoktur. Javascript “c” programlama dilinin webe dönük olarak kullanılmaya çalışılması ile ortaya çıkmıştır. Bu betik dili sayesinde web tarayıcınızda (browser) bulunan bütün nesnelere (yazılara,resimlere,katmanlara,formlara) hareketlilik,birbiri ile etkileşim kurabilecek işler yaptırabilirsiniz. Bu betik dili ile web sayfaları ilk zamanlardaki pasif halinden daha etkileşimli ve kullanıcılara daha renkli işler sunmamızı sağlamıştır. Html içerisine ;
<script type=”text/javascript” language=”javascript”>…betik kodları…</script>
şeklinde eklenebilen basit ama birçok işi yapabileceğiniz bir programlama yapısına sahiptir.
3. Jquery : Javascript dili uzun süre web geliştiriciler tarafından yaygın olarak kullanılmıştır. Fakat gün geçtikçe gelişen web teknolojileri tam javascriptin yerini almaya çalışırken ; jquery denilen ve aslında javascript hazır kütüphaneleri (hazır kodları) ortaya çıkmıştır. Jquery kısaca, daha önceden birilerinin yazmış olduğu ve sizin projelerinize ekleyebileceğiniz hazır kod kütüphanesidir. İlgili kütüphane dosyasını <head></head> tagları arasına ekleyerek sitenizde uzun uzadıya yazacağınız kodları daha da kısa yoldan halledebilirsiniz. Bu kütüphane ,sürekli olarak geliştiği ve günümüzde bu hazır kodları kullanarak birçok content slider , haber manşet sistemleri, galeri scriptleri, vb. sistemler yapılabilmesi için öncelikle www.jquery.com sitesinden en son jquery dosyasını indirmeniz ya da online linkini sitenize eklemeniz gerekmektedir.
4. CSS : İnternet sayfaları geliştirilirken html’nin çok basit ve görsellikten yoksun olması nedeniyle geliştirilen Cascading Style Sheet (Stil şablonları) ; html etiketleri arasında kullanılan style parametreleri ile sayfaların görsel açıdan daha zengin olmasını sağlayan bir teknolojidir. Yerel,genel ve harici olarak kullanılan css teknolojisi ile günümüzde javascriptinde katkılarıyla birçok sitenin içerik kaydırıcıları,açılan menüleri,açılıp kapanan panelleri,vb. görsel efektlerin de geliştirilmesi sağlanmıştır.CSS1,CSS2 ve CSS3 versiyonları vardır.
5. DHTML : Aslında bu kavram ilk bakışta sanki html’nin bir türüymüş gibi görünse de ; html,javascript ve css teknolojilerinin bir arada kullanıldığı bir metottur. Bu metodun amacı sayfayı görsel ya da işlevsel açıdan daha da zenginleştirmektir. Adına az rastlansa da internetin hemen hemen heryerinde bu metodu kullanarak yapılmış araçları ya da görselleri görmeniz mümkündür.
6. XML :Bağımsız bir kuruluş olan W3C (World Wide Web Consorsium) organizasyonu tarafından tasarlanan ve herkesin geliştirebileceği XML (eXtensible Markup Language), herkesin kendi sistemini oluşturabileceği, kendi etiketlerini (Örneğin ; <adresim>…</adresim>) tanımlayarak çok daha rahat ve etkin programlama yapabilecekleri ve bu belirlenen etiketleri kendi yapıları içerisinde standardize edebilecekleri esnek, genişleyebilir ve kolay uygulanabilir bir meta dildir.
Örnek XML ile yazılmış bir kitapçı veritabanı (kayıtlar tutabilir ve yayınlayabilirsiniz. |
<pre class="brush: js;"> <?xml version="1.0" encoding="UTF-8"?> <kitap> <adi>Puslu Kıtalar Atlası</adi> <yazar>İhsan Oktay Anar</yazar> <fiyat>13,99 TL</fiyat> <yayinevi>İletişim Yayıncılık</yayinevi> </kitap> <kitap> <adi>Aşkın Metafiziği</adi> <yazar>Arthur Schopenhauer</yazar> <fiyat>9 TL</fiyat> <yayinevi>Ara Yayıncılık</yayinevi> </kitap> </pre> |
7. DOM(Document Object Model) : İnternet tarayıcıları (browser) sayfalar içerisinde yer alan her bir nesneyi (tag,resim,form alanları,vb) kullanmanızı sağlayan ve aslında bu nesneleri (object) belirten modeldir. DOM kullanılarak javascript dili ile sayfanızdaki formların kullanıcılar tarafından doldurulup doldurulmadığını kontrol edebilirsiniz ya da sayfadaki bir tagı (tagı nesne olarak kabul ederseniz!) istediğiniz gibi şekillendirebilir ya da onun ismiyle (DOM) javascript içerisinden taga (nesneye) hükmedebilirsiniz.
Sayfadaki <a..>..</a> taglarının (bağlantıların) sayısını bulan HTML DOM örneği |
<!DOCTYPE html> <html> <body>
<a name="html">HTML dersleri</a><br> <a name="css">CSS dersleri</a><br> <a name="xml">XML dersleri</a><br>
<button onclick="Fonksiyonumuz()">Sayıyı Bul</button> <script> function Fonksiyonumuz() { var x=document.getElementById("demo"); x.innerHTML="Sayfadaki bağlantı sayısı: " + document.anchors.length; } </script> </body> </html> |
8. AJAX : Aslında yaygın ve yanlış bilinen bu yapı, genelde sadece javascript ile yazılmış hareket eden elementler için kullanılan kodlarmış gibi görülür. Fakat anlamı “ ” yani “Eşzamansız Javascript ve XML” yapılarının kullanılmasıdır. Kısaca bir sayfada sanki başka bir sayfadan (yerden) bazı verilerin ilgili sayfaya getirilmesi ve sayfa değişmeden sizlere gösterilmesidir. Örneğin ; bazı kayıt formlarında yaşadığınız şehri seçince hemen yanındaki o şehre ait ilçelerin bulunduğu kutunun boşken bir anda dolduğunu göreceksiniz. Aslında burada bir XML dosyadan ya da javascript içerisindeki bir dizi değişkenden verilerin istenildiğinde farklı DOM nesneler aracılığıyla sayfada görüntülenilmesi ya da kullanılmasıdır.
AJAX tekniği ile sayfadaki id=myDiv olan bölgede yer alan yazıyı değiştirmek. |
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"> <h2>BURADAKİ YAZIYI DEĞİŞTİR</h2> </div> <button type="button" onclick="loadXMLDoc()"> DEĞİŞTİR</button> </body> </html> |
9. PHP : (Personal Home Page) : Web teknolojilerinin en büyük eksiği genelde client (istemci) tarafında çalışması ve bir kayıt sistemine (text dosya ya da veritabanı) verileri kaydedememesi ve o verileri yeri gelince okuyamamasıdır. Bu eksiği günümüzde gideren ve kullanıcılar ile etkileşim sağlayarak; onlardan alınan bilgiyi ya da halihazırda bulunan bilgiyi onlara sunmak ya da bu bilgilerle işlemler yapabilmek için sunucu tarafında çalışan (Server Side Script) web programlama dilleri geliştirilmiştir. Bunların başında PHP teknolojisi gelmektedir. Linux sunucu sistemleri üzerinde çalışabilen bu teknolojinin tercih edilme nedenleri ise; kısa ve anlaşılır kodlardan oluşması, çabuk kavranabilmesi, hızlı ve kolay yazılabilmesi gibi etkenler gelmektedir. Ayrıca özgür yazılımcılar tarafından da desteklenerek, bu dil kullanılarak günümüzde yazılan hazır CMS (Content Management Systems – İçerik yönetim sistemleri) ler geliştirilmektedir. Bunların başında Wordpress hazır ve yönetilebilir blog-site sistemi, Phpnuke gibi hazır ve yönetilebilir forum sistemleri gelmektedir. Bu sistemler tamamen ücretsiz ve son derece etkileşimli ve de gelişime açık bir yapıya sahiplerdir. Bu nedenle de web teknolojileri içerisinde günümüzde insanların en çok tercih ettikleri arasında yer almaktadır.
Php ile ekrana sadece “merhaba dünya” yazdıran bir kod parçası |
<!DOCTYPE html> <html> <body>
<?php echo “MERHABA DÜNYA”; ?>
</body> </html> |
10. ASP : (Active Server Pages) Microsoft tarafından geliştirilen ve Windows sunucularda çalışan bu etkileşimli (dinamik) site yapmakta kullanılan web programlama dili, günümüzde microsoftun yaygın ticari ağı sayesinde gelişmiş bir yapıya sahiptir. Özellikle PHP ile kıyaslandığında güvenlik açısından e-ticaret sitelerinde tercihen kullanılmaktadır. Bunun yanı sıra ASP ile yapılabilen her şey PHP ile de yapılabilir. Fakat aradaki en büyük fark ASP’nin ticari olarak desteklenmesidir. Web geliştiricileri tarafından tercihten öte mecburi olarak kullanılmasının tek nedeni; sunucu sistemlerde sağlanan güvenlik ve veritabanı işlemlerinde kullanıcı sayısının birkaç milyonu geçmesi durumunda daha sağlam veritabanı altyapısı sunmasıdır. Son zamanlarda çıkan ASP.NET ile ASP gitgide güçlenmiştir.Artık platform ya da kodlama bağımsızlığı kazanmaya çalışmaktadır.
11. SQL : Bu dil bir sayfa tasarlama dilinden öte veritabanına kayıtlar yapabilmek,kayıtları güncelleyebilmek,kayıtlar arasında aramalar yapabilmek için geliştirilmiş bir sorgulama dilidir. Günümüzde PHP ile MYSQL (veritabanı mimarisi) , ASP ile MSSQL veritabanları kullanılmaktadır. Bu veritabanları farklı görünse de ikisinde de SQL dili ile sayfa ile veritabanı arasında sorgulamalar yapılmaktadır. Bu dil sayesinde günümüzdeki sosyal medya araçları,etkileşimli web siteleri kayıtlarını düzenleyebilmektedirler.
12. FLASH : Web teknolojilerinden önce oyun sektöründe kullanılmaya başlanan ve tamamen animasyon yapmaya yönelik olarak geliştirilmiş bu grafik tabanlı tasarım ve programlama(actionscript) arayüzlerine sahip program sayesinde internette özellikle reklamcılık alanında birçok animasyon,banner,vb. tasarlanmaktadır. Tamamen flash (.swf) dosyasından oluşan siteler (otel siteleri,fotoğrafçı siteleri,vb. ) günümüzde çok sayıda olsa da animasyon artık internet siteleri için yeterli gelmemekle birlikte Flash eğer XML yapısından uzak ve diğer veritabanı mimarileriyle daha yakın bir yapıya bürünmedikçe ; internet ömrü sadece reklamcılık ve basit animasyon işleriyle sınırlı kalacaktır. Günümüzde birçok site de reklam gösterimlerinde olay,durum anlatımları ya da sadece görsel hareketlilik sağlamak amacıyla kullanılmaktadır.
JSP (Java Server Pages) ya da JAVA gibi web ya da genel amaçlı etkileşimli projeler geliştirmekte kullanılan teknolojiler mevcuttur. Fakat buraya kadar bahsi geçen tüm teknolojiler artık web de her an bir sayfada rastlayabileceğiniz betik ya da programlama dilleridir. Bu nedenle bu kavramların ne anlama geldiğini az çok bilmeniz ; internetin gelişimi ya da bir sitenin gelişimi için çok önemlidir.