Mobil Uyumlu ve Duyarlı Bir Web Uygulaması Yazmak için jQuery ve Bootstrap Ekleme


Bu serinin 1. Bölümünde, IDE'miz olarak Netbeans kullanarak temel bir HTML 5 projesi oluşturduk ve ayrıca dilin bu yeni spesifikasyonuna eklenen birkaç öğeyi sunduk.

Birkaç kelimeyle, jQuery'yi HTML sayfalarında istemci tarafı komut dosyasını büyük ölçüde basitleştirebilen tarayıcılar arası ve platformlar arası bir Javascript kitaplığı olarak düşünebilirsiniz. Öte yandan Bootstrap, mobil uyumlu ve duyarlı web sayfaları oluşturmak için HTML, CSS ve Javascript araçlarını entegre eden eksiksiz bir çerçeve olarak tanımlanabilir.

Bu yazıda, HTML 5 kodunu daha kolay yazmak için paha biçilmez iki araç olan jQuery ve Bootstrap'i tanıtacağız. Hem jQuery hem de Bootstrap, GPL ile uyumlu olan ve dolayısıyla özgür yazılım olan MIT ve Apache 2.0 lisansları altında lisanslanmıştır.

Lütfen temel HTML, CSS ve Javascript kavramlarının bu serinin hiçbir makalesinde ele alınmadığını unutmayın. Devam etmeden önce bu konularla ilgili hızlanmanız gerektiğini düşünüyorsanız, W3Schools'taki HTML 5 eğitimini şiddetle tavsiye ederim.

JQuery ve Bootstrap'i Projemize Dahil Etmek

JQuery'yi indirmek için, projenin http://jquery.com adresindeki web sitesine gidin ve en son kararlı sürüm için bildirimi görüntüleyen düğmeyi tıklayın.

Bu yazının yazıldığı sırada, tam tarayıcı uyumluluğu için v1.11.3 (Internet Explorer sürüm 6, 7 ve 8 dahil) veya ziyaretçilerinizin IE'nin bu sürümlerini kullanmayacağından eminseniz v2.1.4'tür.

Bu kılavuzda bu ikinci seçeneğe gideceğiz. Henüz indirme bağlantısına TIKLAMAYIN (aşağıdaki resim yalnızca hangisinin doğru seçenek olduğunu belirtmek içindir).

JQuery'nin sıkıştırılmış bir .min.js veya sıkıştırılmamış .js sürümünü indirebileceğinizi fark edeceksiniz. İlki özellikle web siteleri içindir ve sayfaların yüklenme süresinin azaltılmasına yardımcı olur (ve böylece Google sitenizi daha iyi sıralar), ikincisi ise çoğunlukla geliştirme amacıyla kodlayıcıları hedef alır.

Kısalık ve kullanım kolaylığı açısından, sıkıştırılmış (küçültülmüş olarak da bilinir) sürümü site yapımızın içindeki betikler klasörüne indireceğiz.

Sıkıştırılmış üretim sürümü için bağlantıya sağ tıklayın ve Bağlantıyı Farklı Kaydet… öğesini seçin ve ardından belirtilen dizine gidin (Projemizi Bölüm 1'de kaydetmeyi seçtiğimiz yerde belirtilen yola başvurmak isteyebilirsiniz).

Son olarak, mevcut iletişim kutusunun altındaki Kaydet'i tıklayın:

Şimdi projemize Bootstrap eklemenin zamanı geldi. Http://getbootstrap.com adresine gidin ve Bootstrap'i İndir'e tıklayın. Bir sonraki sayfada, küçültülmüş bileşenleri bir zip dosyasında kullanıma hazır olarak indirmek için aşağıda belirtildiği gibi vurgulanan seçeneğe tıklayın:

İndirme işlemi tamamlandığında, İndirilenler klasörünüze gidin, dosyayı açın ve vurgulanan dosyaları projenizin içindeki belirtilen dizinlere kopyalayın:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

Şimdi Netbeans'de sitenizin yapısını genişletirseniz, aşağıdaki gibi görünmelidir: