Her ne kadar son zamanlarda etkisini kaybetse de Internet Explorer testi hayatımızın bir gerçeği. Benim gibi MacOs kullananlar için veya Linux kullananlar için bu testleri yapmak bir eziyet halini alıyor. Ben uzun süredi Virtualbox üzerinde kurulu Windows’lar ile bu sorunu halletmekteyim. Bugün tekrar kurarken bunu yazmalıyım dedi.

Sırası ile yaptığım adımları anlatayım.

İlk olarak VirtualBox‘ı kuruyoruz. Ben kendi makinem için VirtualBox 5.0.14 for OS X hosts amd64 olanı indirdim. Yaklaşık 90,5 Mb.

VirtualBox, Linux (veya MacOS) üzerinde yaygın olarak kullanılan sanallaştırma araçlarından birisidir. Böylece Windows ortamında çalışması gereken programları Linux (veya MacOS) altında kolaylıkla çalıştırabilirsiniz.

Kaynak http://wiki.ubuntu-tr.net/index.php?title=VirtualBox

Hazır bir paket olan kurulum paketini next - next - finish :) sırası ile kurdum.

Sıra geldi istediğim işletim sistemini kurmaya. Bu konuda Microsoft bize çok güzel bir imkan sağlıyor. https://dev.windows.com/en-us/microsoft-edge/tools/vms/ adresi üzerinden istediğimiz Windows - Internet Explorer sürümünün imajını indirme imkanı sağlıyor.

İndirebileceğiniz Window ve Internet Explorer sürümleri. Bugün ( 11 Şubat 2016 ) itibari ile aşağıdaki gibidir.

• IE6 on XP
• IE7 on Vista
• IE8 on XP
• IE8 on Win7
• IE9 on Win7
• IE10 on Win7
• IE10 on Win8
• IE11 on Win81
• IE11 on Win7
• MSEdge on Win10

Ben Windows 7 üzerinde Internet Explorer 11 seçtim. Sonrada ( Select Platform ) kısmından VirtualBox’ı seçtim.

Sağ taraftan Download.zip’a tıklayıp windows imajını indirdim. Dosya boyutu 3,81 Gb. Uygun zamanda indirmekte yarar var.

Bu dosyayı dokümanlarda uygun bir yere taşıyıp Rar Extrator Free ile bu dosyayı açtım. IE11 - Win7.ova adlı bir dosyamız oluyor. Bu dosyaya çift tıklayarak Window imajını VirtualBox’a ekliyoruz. Yine next - next - finish sırası ile kurulumu yapıyoruz. Bazı ayarlar yapılabilir ben herhangi bir şeye dokunmadan kurulu yaptım, pardon küçük bir ayar yaptım. Sanal makinenin kullanacağı RAM’i başlangıç değeri olan 512Mb’dan 1024Mb’a çektim.

Sonuç aşağıdaki gibi.

Daha sonra Windows üzerinde ağ ayarlarını yaparak kendi bilgisayarınıza ağ üzerinden ulaşabilirsiniz. Ben daha önce bu konuda sorun yaşarken bu sefer sorun yaşamadım.

Direk bilgisayarımın ip’sini yazarak İnternet Explorer testlerime başladım.

Kalın sağlıcakla.

Kaynaklar

• http://blog.reybango.com/2013/02/04/making-internet-explorer-testing-easier-with-new-ie-vms/
• https://davidwalsh.name/free-ie-vms

Sayfa Planını Izgara Sistemi ile Oluşturmak

Izgara ( Grid ) sistemleri sitemizin belli standarda uygun ve hızlı bir şekilde sayfa planını oluşturmamıza yarayan sistemlerdir. Bu sistemlerin uygulaması tasarımdan başlar. Tasarımcı bu sisteme uygun bir site çıkarır. Kod yazarken bizde bu yapıyı uygularız. Bu durum maalesef tasarımcı, arayüz geliştirici arasındaki koordinasyon eksikliğinden çok fazla projede uygulanamamasına neden oluyor. Daha sistemli ve standart çalışmak için güzel yapılar.

Biz arayüz geliştiriciler için bulunmaz bir nimet olan ızgara yapıları sayesinde, kodlama sürelerimiz ciddi ölçüde azalır. Genişlikler, ara boşluklar belli olduğu için sayfa planını oluşturmak çok basit bir hal alır. Daha önce ben PSD’den HTML’e - fanatikmarslar.com Sitesinin Kodlaması makalesinde anlattığım gibi tüm bu değerleri tek tek ölçüp tanımlamam gerekiyordu. Ancak ızgara sistemi ile oluşturulan sitelerde bu değerler belli ve atanmış olduğu için bu kısmı hızlıca geçeriz.

Burada tasarımcı ve arayüz geliştiricileri açısından şöyle bir avantajı var. Tasarımcılar yaptıkları tasarımın bire bir arayüze uyarlanmasını ister, tabi uygularken bazı sorunlar çıkar ve piksel hesabına dönen tartışmalar çıkar. Izgara sistemine uyan tasarımcı ve arayüz geliştirici arasında böyle sorunlar olmaz, çünkü değerler baştan bellidir.

Bu konuda geliştirilmiş bir çok anaçatı ( framework ) var.

• 960 Grid System
• Skeleton
• Blueprint
• Less Framework
• vb.

Yukarıda listelenen ve daha fazlasını internette görebileceğimiz ızgara sistemleri mevcut. Bu hazır yapıların amacı bu işi daha kolay hale getirmek.

Daha önce yukarıdaki ızgara sitemlerinden birini kullanmış olanlar için konunun devamını anlamak daha basit olacaktır.

Bootstrap Izgara Sistemi

Bootstrap twitter geliştiricilerinin çıkardığı hızlı bir şekilde web sitesi geliştirmemizi sağlayan HTML, CSS ve Javascript anaçatısıdır. Bir çok modülü bulunan bu yapının biz sadece ızgara sisteminden bahsedeceğiz.

Normal ızgara sistemlerine benzer bir yapıya sahip bootstrap ızgara sistemi, şu sıralar kullanılan en yaygın ızgara sistemidir.

Bootstrap 2’ye göre bootstrap 3 daha fazla kesme noktasına (breakpoint) sahip. Bootstrap 2’de mobil ve masaüstü noktaları varken, bootstrap 3 mobil, tablet, masaüstü ve daha büyük ekranlar olmak üzere dört durma noktası mevcuttur. Ayrıca Öncelik Mobilde (Mobile First) akımı etkisine giren 3. sürüm bunun etkilerini grid sistemde göstermiştir.

Uyumlu web sitesi kodlarken bir ızgara sistemi kullanmak neredeyse zorunlu hale geliyor. Normal zamanlarda kullanmıyorsak bile uyumlu web siteleri yaparken olmazsa olmazımız oluyor.

Bootstrap ızgara sistemi 3 ana yapıdan oluşur.

• Kapsayıcı (.container)
• Satırlar (.row)

• Kolonlar (col-*)

  .col-md-8

  .col-md-4

Basit bir kod örneği yukarıdaki gibi oluyor.

Kapsayıcı (.container)

Bootstrap ızgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır. Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.

• .container : sabit genişlikteki sitelerde
• .container-fluid : esnek yapılı sitelerde

Uyumlu web için değişen genişlikler de kapsayıcı genişliğide değişir. Satırlar ve kolonlar yüzde değerli olduğu için değişen genişliklerde değerleri değişmez.

• 1200px veya daha büyük ekran çözünürlüğünde: 1170px
• 992px - 1199px arasında: 970px
• 768px - 991px arasında: 750px
• 768px’ den daha düşük ekran çözünürlüğünde: auto

Satırlar (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

Satırları ana kapsayıcısı (.container) dışında kullanmayın çalışmıyor. Bazen gözden kaçıyor, sorun oluyor :)

Kolonlar (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.

Farklı ekran çözünürlükleri için farklı kolon sınıfları tanımlanır.

• .col-xs- 768px’den küçükse
• .col-sm- 768px ile 991px arasında
• .col-md- 992px ile 1199px arasında
• .col-lg- 1200px eşit ve büyükse

Yukarıdaki örnekte iki tanım yapılmıştır. Bootstrap 3 ile birlikte mobil önceliği geldiğinden eğer küçük boyutlu ekran için bir tanım yapıldı ise ve başka tanım yoksa bu tanım yukarı doğru tüm ekran boyutlarını etkiler. Yukarıdaki örnekte mesela .col-xs tanımı hem mobili (768’den küçük) hemde tableti (768px - 991px) etkileyecektir. .col-md tanımı hem masa üstünü hemde daha büyük ekranları etkiyecektir.

Bu yazıyı burada bitirip bir sonraki yazıda bootstrap ızgara sistemini anlatmaya devam edeceğim.

Kalın sağlıcakla.

Kaynaklar

• http://www.adobewordpress.com/ders-2-bootstrap-grid-izgara-yapisi
• https://www.youtube.com/watch?v=yhpE4U3acqI
• http://usablica.github.io/front-end-frameworks/compare.html
• http://www.sitepoint.com/understanding-bootstrap-grid-system/
• http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
• shoelace.io
• http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

iPhone’da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox‘ın ilgili option‘ununu seçmek için kullandığım bir kod parçası.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

Sorunun çözümü her zaman ki gibi stackoverflow‘da

attr özelliği Safari’de çalışmıyor. Onun yerine jquery 1.6’dan sonra gelen prop özelliğini kullanmak gerekiyor.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).prop('selected', true)

Aklınızın bir köşesinde kalsın.

Kaynak

• http://stackoverflow.com/a/9024232/296373