Sakin Adam

Web Yazılım Günlüğü

Bootstrap Nedir?

Bootstrap; Twitter tarafından geliştirilen ve geliştiricilerin kullanımına sunulmuş, ücretsiz bir tasarım kütüphanesidir. Web tasarım dünyasına belli bir standart getirmeyi başarmıştır. Hazır satılan bir çok template bootsrap alt yapısını kullanır. Bu sayede üzerinde değişiklik yapma imkanı daha çok olur. Yani aldığınız template’in sınırları içinde kalmış olmazsınız.

Bootstrap; tasarım tarafında pek bilgisi olmayan, sunucu taraflı geliştiriciler için de adeta bir nimet. Zira bootstrap, sayfa kalıpları, form elementleri, tablo yapıları, menüler, modal box, slider gibi birçok yapıyı ve daha fazlasını bünyesinde barındırır. Bu durumda bir satır css yazmadan gayet güzel sayfalan oluşturmak mümkün oluyor.

Twitter Bootstrap’ı bu adresten indirebilirsiniz. Gerekli dosyaları aşağıdaki örnekte olduğu gibi çağırdıktan sonra kullanmaya başlayabilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
</body>
</html>

Bootstrap ile ilgili dökümanlara bu adresten ulaşabilirsiniz.

jQuery UI Nedir?

jQuery UI(User Interface-Kullanıcı Arayüzü) jQuery üzerine kurulmuş bir javascript kütüphanesidir. İsminden de anlaşılacağı gibi tasarım ağırlıklı bir kütüphanedir. Html elemanlarına efekt ve işlesellik katmak için kullanılır. En çok kullanılan fonksiyonları : sürükle-bırak, yeniden ölçülendirme, takvim, progressbar, slider, menü, açılan pencereler ve daha fazlasıdır. Statik ve durgun html tasarımlarından sıyrılıp, sayfalara hareket getirmek ve canlandırmak için birebir kütüphanedir. jQuery’de olduğu gibi jquery-ui’de de az kod – çok iş mantığı vardır.

jQuery UI kütüphanesine ve ilgili dökümanlara bu adresten ulaşabilirsiniz.

jQuery Nedir?

Yazımın hemen başında şunu belirtmeliyim. jQuery bir değil, bir javascript kütüphanesidir. Bir çok insana jQuery dediğiniz de size hemen bunu söylerler. Ben bu tarz şeylere pek takılmam ancak insanlar haklı. Ama bu tarz insanlara ben de biraz sinir oluyorum açıkcası.

jQuery 2006 yılında John Resig tarafından geliştirilmiş ve geliştiricilerin kullanımına sunulmuştur. Günümüzde (2013) en çok kullanılan javascript kütüphanesi ünvanına sahiptir. En büyük avantajlarından bir tanesi, hatta bana göre en önemlisi de budur. Çünkü bir dili/kütüphaneyi ne kadar çok kişi kullanıyorsa, onunla ilgili o kadar çok döküman vardır ve karşılan sorunlarla ilgli de o kadar çok döküman/çözüm vardır.

jQeury kütüphanesini resmi sitesinden indirerek kullanabilirsiniz. Yeni aynı sitedeki dökümantasyona da ulaşabilirsiniz. jQuery gerçekten muhteşem bir teknoloji. Ajax teknolojisinde insanlar gerçekten hayrete düşmüşlerdi ancak jQueryden sonra bizi hayrete düşürecek şey ne olacak çok merak ediyorum. Bu kütüphane sayesinde, farklı animasyonlar ve efektler kullanılabiliyor. Sliderlar genellikle jQuery kullanmakta. Animate özelliği sayesinde, elementleri hareket ettirebilir, tonlarıyla oynayabilirsiniz.

Ağırlıklı olarak tasarım odaklı olduğu söylenir. Ancak seçicileri,post,attributes gibi bir çok kütüphanesi ile web yazılım tarafıyla olan işlemlerinizde de büyük kolaylık sağlıyorsunuz. Örneğin post işleminde, ajax büyük bir kolaylık ve yalınlık getirmişti, ama jQuery bu işlemi bir adım öteye taşımış.

Daha burada yazamadığım bir çok özelliği ile jQuery gerçekten fark yaratmış bir kütüphane. Basit bir örnek vermek gerekirse, daha düne kadar javascript kütüphaneleri yazılırken, artık günümüzde jQuery kütüphanesi için kütüphaneler yazılmakta. Jquery UI buna en büyük örnektir.

Geleneği bozmuyorum ve aşağıda bir jQuery kodunun nasıl olması gerektiği ile ilgili örnek kod paylaşıyorum. Burada dikkat edilecek iki nokta bulunuyor. Birincisi jQuery kütüphanesini çağırmış olmanız, ikincisi ise kodları ‘//jquery kodları burada’ yazan kısma yazmanız. Diğer kalan js kodlarını, jQuery açılış ve kapanış tagları olarak görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
	//jquery kodları burada
});
</script>
</head>

<body>
</body>
</html>

Css Nedir?

Cascading Style Sheets (basamaklı stil sayfaları) kelimelerinin baş harflerinden oluşur. Web sayfalarının tasarımsal olarak düzenlemeye yarayan bir teknolojidir. Css’e bir dildir denir mi tam emin olamadım, ancak başlı başlına bir hiyerarşiye sahiptir ve geniş bir kapsama sahiptir. İlk kez 1996 yılında ortaya çıkmıştır. Şu an 1999 yılında kullanıma açılan ve 2012 yılında son güncellemeleri yapılan CSS 3 kullanılmaktadır.

Sadece css kullanarak bir web sayfası yapamazsınız, html de bilmeniz gerekir. Zaten css ile yapılan şey, html taglarına stiller atamaktır. Css’in yaygın olan üç farklı kullanım şekli vardır.

Inline Css
Bu kullanım şekli pek önerilmese de ısrarla kullanımakta. Html taglarına ‘style’ özelliği ile stil atanarak yapılır. Bu yöntemde; sayfa içindeki aynı özelliklere sahip taglar için tekrar tekrar style özelliğinin eklenmesi gerekir. Bir değişiklik yapılacağı zaman tüm style özelliklerinin değiştirilmesi gerekmektedir. Bu yöntem seo açısından da sakıncalıdır. Arama motorları sayfalardaki içerik/kod oranı-na bakmaktadır ve bu konullanımda içerik için daha fazla kod yazılmaktadır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h1 style="color:#00F">Başlık</h1>
</body>
</html>

Dahili Css
Bu kullanımda; sayfanın herhangi bir yerinde

taglarının arasına css kodlarının yazılması ile kullanılan bir şekildir. Bu kullanım içerik/kod oranı bakımından avantajlıdır. Ancak bu kullanım şeklindeki handikap ise diğer web sayfalarıyla farklılıklara yol açabilecek olmasıdır. Bir değişiğiklik yapıldığında, değişiklik tüm sayfalara aktarılmak zorundadır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h1 {
	color:#00F;
}
</style>
</head>

<body>
<h1>Başlık</h1>
</body>
</html>

Harici Css
En çok önerilen kullanım şeklidir. Harici bir css dosyasında tüm css kodlarınızı saklarsınız ve bu sayfayı web sayfanıza çağırırsınız. Bu kullanım sayesinde merkezi bir dosyadan tasarım stillerinizi yönetebilirsiniz. Bir diğer yararı da, tarayıcılar css dosyasını bir kez indirdikten sonra tekrar indirme ihtiyacı duymamalarıdır. Böylece bant genişliğinden de kar etmiş olursunuz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<h1>Başlık</h1>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
h1 {
	color:#00F;
}