Barış AKDEMİR tarafından yazılmış tüm yazılar

Css Çakışması Sorunu

Css, ,

Web tasarımla uğraşan bir çok kişi, css dosyalarının çakışması sorunuyla karşılaşılmıştır. Aynı tag’a stil atanmış css dosyalarından dolayı sorun yaşanır. Bu büyük sorunun çok basit bir çözümü var aslında. “Scoped” metodu. Stillerin farklı olmasını istediğiniz divin içerisinde “style type=”text/css” scoped” tagları arasına css kodlarını yazıyorsunuz ya da harici css dosyanızı çağırıyorsunuz. Burda dikkat edilmesi gereken nokta ise şu : bu method ile cağırdığınız stiller içerisinde olduğu tag’da geçerli oluyor. Bu divin dışarısında ise diğer methodlarla yazılan/çağırılan cssler geçerli olacaktır. Örnek kodu aşağıda ekliyorum. Bu örnek kod Html5‘i destekleyen tarayıcılar için. Ardından tüm tarayıcılar için olan örneği de ekleyeceğim. 

<!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>Css Çakışması Sorunu</title>
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
</body>
</html>

Html5 tarayıcılarda sorunumuzu çözdük ama ya desteklemeyenler için. Geliştiriciler bunun için de bir çözüm bulmuşlar. “jQuery Scoped CSS”; jquery üzerine geliştirilmiş javascript kütüphanesi bu sorunu çözüyor. Kütüphaneyi bu adresten indirebilirsiniz. İndirdiğiniz dosyalarda bir örnek mevcut ancak ben yine de örnek kodu aşağıda paylaşıyorum.

<!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>Css Çakışması Sorunu</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.scoped.js"></script>
</body>
</html>

Bootstrap Nedir?

Web Programlama,

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?

JavaScript, , ,

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?

JavaScript,

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>