Arayüzsüz tarayıcıları, web ve tarayıcı otomasyonu

Size tarayici otomasyonu hakkinda ufak bir bilgi verecegim. Tarayici denince akla web sitelerinde gezmemizi saglayan ekranda, html gosteren bir uygulama geliyor. Cogu tarayici kendine has bir motorla calisiyor arka planda ve ekranimizda sitelerle etkilesime girmemizi sagliyor. Ama aslinda tarayicinin yaptigi is ekranda goruntuleme yapmadan da gizlice yapilabiliyor. Sadece bu isi yapan tarayicilar da mevcut gunumuzde. Bunlara kafasiz (headless’dan cevirme, yani arayuzu olmayan) tarayici deniyor. Genel tuketicini icin anlami olmayan bu konu, programalama ve urun gelistirici kitle tarafindan cok anlamli bir sekilde kullanilabilir durumda.

Ozellikle programatik test ve otomasyon yapma konusunda kafasiz tarayicilari kullanarak bir akisi isletebilirsiniz. Mesela;

  • http://orneksite.com adresini yukle,
  • Sayfa kodlarinin yuklenmesi ve calistirilmasi tamamlandiginda,
  • “Isim” adli alana “Fatih” yazisini gir,
  • “Gonder” adli butona tikla,
  • 5 saniye bekle
  • Ekran goruntusu alip kaydet

gibi bir akisi isletebilirsiniz. Ozellikle arayuz testi ve arayuz akislarini tarayici otomasyonu yapmak gelistirme surecinde cok faydali olabilir.

Sadece ekran goruntusu alma islemi icin bile kafasiz tarayicilari kullanan sirketler var. Ekran goruntusu ustunden bile gelistirme surecinizde 100 sayfalik bir web sitesinde hangi sayfalarda bozukluklar oldugunu otomatik olarak tespit edebilirsiniz. Cok yaygin bir ornek olarak, her gelistirme versiyonunda ekran goruntusu alip bir onceki surumle programatik renk karsilastirmasi yapip her sumude sayfalarin yuzde olarak ne kadar degistigini takip edebilirsiniz mesela. Boylece basit bir css hatasi bile yapsaniz nereleri bozdugunuzu kolayca tespit edebilirsiniz.

Kullanabilecegim arayuzsuz tarayici var mi?

Kafasiz tarayicilardan en bilinenleri Phantom adinda nodejs ile yonetilebilen bir tarayici, Chrome headless adinda chromium projesini baz alan iki projeye bakabilirsiniz.

https://github.com/dhamaniasad/HeadlessBrowsers burada gunumuzdeki tum kafasiz tarayicilari listelemisler.

Bitbucket ile statik websitenizi host edebilirsiniz

Bu yazida, github’da cok sevdigim, statik website host etme ozelliginin, bitbucket tarafindan taklit edilmis halini kisaca aciklayacagim.

Bu ozellik sadece, statik web dosyalarini destekliyor, yani render edilmis html, js, css, imajlar gibi dosyalari bir domain altinda goruntulemenizi saglayacak. Sunucu tarafli kodlari desteklemiyor ama statik site ortaya cikaran icerik yonetim sistemlerini kullanarak tum sitenizi buradan sunabilirsiniz.

Bunu yapmak cok basit. Birkac adimda ustunden gecelim. Benim bitbucket kullanici adim “mfyz” ve bitbucket her hesap basina 1 tane statik website host edebilmenizi sagliyor. Malesef birden fazla site host edemiyorsunuz tek hesapta. Eger “mfyz.bitbucket.io” yeni bir repository olusturursaniz ve icine index.html koyarsaniz, tarayicinizda “http://mfyz.bitbucket.io” adresiyle ulasabilir olacaksiniz.

Grunt nedir? Bir web geliştiricisinin neden görev çalıştırıcısına ihtiyacı var?

Kısaca Grunt

Grunt bir görev çalıştırıcısı. Web geliştirme sürecinde ihtiyacınız olan operasyonları otomatize etmenize yarayacak bir araç. Daha çok platforma dönüşmüş olan grunt, yüzlerce eklentiyle istediğiniz forma sokabileceğiniz bir yapılandırma aracı. Hızlıca bir örnek vereceğim. Basit bir web sitesi hazırlıyorsunuz ve stillerinizi css yerine less ile yazdınız, javascriptlerinizi cosnole.log debug satırlarıyla ve bir sürü yorum ile yazdınız. Sitenizi her yayına alacagınızda bir toparlama ve paketleme işi yapmanız gerekiyor, lessilerinizi css’lere derlemek, belki cssmin gibi ufaltma operasyonuna sokmak, imajlarınızı sıkıştırmanız, javascriptlerinizi temizleyip küçültmeniz belki birden fazla kaynağı tek dosyada birleştirmeyi isteyeceksiniz. Her değişiklik yaptığınızda bu işlemleri tekrarlamanıza imkan yok. İşte bu noktada grunt devreye giriyor.

Grunt ile neler yapabilirsiniz?

Sonu yok çünkü kendi eklentilerinizi yazarak node.js yeteneklerini kullanarak yapamayacağınız şey yok. Ama eklenti veritabanından erişebileceğiniz o kadar çok şey var ki.

  • Less, Scss, Sass vb… herhangi bir css derleme işinizi
  • Kod validasyonu (css, js, html)
  • Imaj optimizasyonu
  • Birden fazla javascript veya css kaynağını birleştirme
  • Css veya javascript sıkıştırma
  • Kodunuzdaki yorumları, debug için geriye kalan artıkları temizleme
  • Kaynak versiyonlama

Daha sayamadığım bir çok operasyonu grunt ile farklı kombinasyonlarda hazırlamanız mümkün.

Örnek

Versiyonlamayı denemek için kendime bir örnek kod hazırladım ve github’da paylaştım. Basit bir css javascript projesinde kodumu yayınlamadan önce bütün css ve javascript kaynaklarımı sıkıştırıp adlarını versiyonlamarak yayındaki tüm dosyaların en taze kodu kullanmasını sağlamak için grunt kullandım. Projeye https://github.com/mfyz/grunt-release-boilerplate adresinden erişebilirsiniz.

Grunt hakkinda daha fazla bilgiye sitesinden erişebilirsiniz: http://gruntjs.com/

CSS ile radio butonlardan segmented control yapmak

Bu form elementinin diğer ortamlardaki adını bilmiyorum ama cocoa’daki (macosx işletim sistemini doğal arayüz kütüphanesi) adı segmented control. Bu yüzden, yazının devamında segmented control olarak kullanmaya devam edeceğim.

iOS arayüzlerindeki on/off swtich’lerini biliyorsunuzdur, geçtiğimiz 2 yılda web’deki implementasyonları o kadar artti ki, artık her yerde basit bir javascript kütüphanesi olarak bu form elementini bulmak mümkün. Sadece javascript değil css implementasyonları da var. Bu yazıda, bu elementin teorisine biraz değineceğim. Ayrıca benim kullandığım method, javascriptin çalışmadığı tarayıcılarda da sorunsuz çalışacak (fallback) hatta css desteklemeyen taryıcılarda dahi fonksiyonalitesini bozulmadan koruyacak standart input, label elementleri ile bunu nasıl yapabileceğinizi anlatacağım.

Ama görsel olarak neyden bahsettiğimi göstermem gerekirse:

Gördüğünüz gibi aslında standart bir çoktan seçmeli tek cevap sorularından bahsediyorum. Bunun için standart form elementlerinden radio butonu kullanarak cevapları tek grup altında label ve input elementleriyle bir formda toplayalım. Okumaya devam et “CSS ile radio butonlardan segmented control yapmak”

Sitenizi Twitter Cards ile tweet arkadaşı yapın

Web sayfanızı SEO taranabilirliği için meta ve belki facebook için de düzenlediniz diyelim. Amacınız sayfanızı tarayan google ve benzeri örümcekler/tarayıcıların sayfanız hakkında topladığı özet bilgisi tanımlamak. Çünkü google ve facebook sayfanızda ne çözebildiğini değil, sizin onlar için, sayfanızın ne anlama geldiğini söylemenizi istiyorlar. Bunun için de standart sayfa tanımlaması meta etiketlerine ek olarak facebook opengraph meta etiketlerini kullanarak, facebook örümceklerinin, özel olarak sayfa içeriğiniz hakkında daha detaylı bilgi almasını sağlayabiliyorsunuz. Facebook opengraph içerik (nesne) tanımlamalarını yıllar önce kullanıma sundu ve şu an bir çok popüler web sayfası bu meta etiketleri ekleyerek sayfalarının facebook’da nasıl göründüğünü bir nebze de olsa kontrol edebiliyorlar.

Twitter da birkaç ay önce “Twitter Cards” adında bir grup meta tanımlaması kullanmaya başladığını yayınladı. Bunun asıl amacı, tweet’lerdeki linklerin ne anlama geldiklerini daha iyi çözebilmekti. Eğer twitter card meta etiketleriyle sayfa kimliği belirlenmiş bir sayfa url’i tweet ederseniz, o tweet genişletilebilir (expand) hale geliyor ve web sitesinde ve twitter’ın mobil uygulamalarında görüntülendiğinde tweet metni içindeki url’e ait sayfa detaylarını twitter card meta etiketleri aracılığıyla gösteriyor.

Yani insanlar sayfanızı tweetlediklerinde siz twitter’a sayfanız hakkında daha detaylı bilgi sunabiliyorsunuz ve twitter bunu daha zengin içerik olarak kullanıcılarına sunuyor.

Twitter card adını verdikleri bu link açıklayıcı meta etiketleri, opengraph’e benzer şekilde başlık, açıklama ve açıklayıcı görsel ile bir linki özetleyen bir bilgi sunuyor. Aşağıda twitter card destekleyen bir link paylaşılmış bir tweet’in web’de nasıl göründüğünü görebilirsiniz.

Twitter card detayları tabi ki varsayılan biçimde görüntülenmiyorlar ancak kullanıcı, mobilde tweet’e dokunursa veya web’de expand butonuna basarsa twitter card detayları görüntüleniyor.

Sitenizin tüm sayfalarını twitter card ile desteklemek zorunda değilsiniz. Ancak blog yazısı gibi çoğunlukla metin ağırlıklı bir içerik, video veya fotoğraf gibi bir içeriğiniz var ise bu içeriğin paylaşılma ihtimali daha yüksek olacağından bu sayfalara twitter card metaları eklemek daha anlamlı olacaktır. Zaten twitter içerikleri bu üç kategoride grupluyor ve bunu da twitter card türü olarak tanımlamanızı istiyor.

Twitter Card’ınızı hazırlamak için önce içeriğinizi özetleyecek 3 elementi tanımlamanız gerekiyor.

  • İçerik tam adresi (url)
  • İçerik başlığı
  • İçerik özeti – kısa metin
  • İçerik görseli (görselin tam url’i)

Bu öğeleri hazırladıktan sonra bu sayfalarda aşağıdaki meta etiketi grubunu head etiketi içine eklemeniz, sayfanızın twitter card’a sahip olmasına yetecektir.

Yukarıdaki kod genel bir metin ağırlıklı içeriğe sahip sayfayı özetleyen twitter card kodu. Dökümantasyonda fotoğraf yani tekil görsel ağırlıklı bir sayfa veya video tipi medya sunumu yapan bir sayfanın nasıl bir twitter card’a sahip olması gerektiğini ve bu türlere özel etiketlerin açıklamalarını ve örneklerini görebilirsiniz. https://dev.twitter.com/docs/cards adresinden erişebileceğiniz twitter card dökümantasyonu ayrıca twitter card meta etiketlerinin tüm listesini ve gerekli detaylı açıklamalarını veriyor.

https://cards-dev.twitter.com/validator adresinden de hazırladığınız twitter card’i sayfanızın url’ini girerek önizlemesini görüntüleyebilirsiniz. Bu araç aynı zamanda hataları görmenizi ve sayfanızın twitter card’ında bir sorun olup olmadığınızı anlamanıza yardımcı olacaktır.

HTML ve CSS Başlangıç Rehberi

@shayhowe tarafından hazırlanan HTML ve CSS’e giriş rehberi çok derin olmasa da HTML ve CSS’i genel hatlarıyla özetlemiş. Hem güzel bir sunum ile hazırlanmış hem de güncel bilgilere yer verilmiş. http://learn.shayhowe.com/html-css/ adresinden ulaşabileceğiniz rehber 10 başlıkta toplanmış güzel bir kaynak.

Shay Howe’un daha derin HTML ve CSS konularını topladığı hatta halen yazmaya devam ettiği, gelişmiş HTML ve CSS rehberine de http://learn.shayhowe.com/advanced-html-css/ adresinden ulaşabilirsiniz.

Radio butonları CSS ile makyajlamak

Bildiğiniz gibi bazı form elementlerine (radio butonlar, check butonlar ve birkaç diğer element) kozmetik olarak müdahale edemiyoruz veya kısıtlı şekilde müdahale edebiliyoruz. Sonuç olarak bu elementlerin görüntüsü ve çizilmesi tamamen tarayıcı kontrolünde, çoğu işletim sisteminin arabirim elementleriyle uyumlu şekilde görünecek şekilde ayarlanmış. Web arayüzünde standart elementlere dokunmamak genellikle farklı tarayıcı, farklı cihaz ve farklı işletim sistemlerinde sorunsuz çalışmasını sağlaycaktır.

Fakat bazen bir sayfayı sadece bir cihaz için veya belirli bir tarayıcıda görünecek şekilde tasarlarsınız ve bu noktada kullandığınız tüm elementlere istediğiniz tasarımı giydirmek isteyebilirsiniz. Örnegin mobil bir tarayıcıda görüntülenecek bir oyun arayüzü tasarlıyor olabilirsiniz.

Bunun için javascript çözümleri mevcut fakat birkaç css3 özelliği kullanarak sadece css ile çözebilirsiniz. Bu yazıda size radio butonları istediğiniz şekilde şekillendirmeyi anlatacağım. Radio butonları standart kullanımda, yani çoklu secenekten yapılan seçimler için bir örnek üzerinde göstereceğim.

Okumaya devam et “Radio butonları CSS ile makyajlamak”

CSS before ve after sözde elementleri

CSS2 ile gelen en faydalı özelliklerden biri de yeni sözde seçiciler, bunlardan ikisi “before” ve “after” seçicileri birçok minimal yaklaşıma olanak sağladı.

Özelliğin çıkış noktası bir elementin öncesi veya sonrasına noktalama gibi işaretçiler yerleşitrebilmekti. Yani en sade kullanımıyla:

Bu kod ile bir alıntı yazısının başına ve sonuna çift tırnak ekleyebiliyorsunuz:

Kırmızı ile işaretlediğim karakterler css ile eklendi. Ya da devamı olan bir yazı basarken ekrana:

kodu ile “…” ekleyebiliyorsunuz:

Fakat bu yeni sözde seçicileri akıllıca kullanarak bir element üretebilirsiniz. Yani bu seçici “content” özniteliği aldığı zaman dom üstünde yerleşmese de görsel olarak bir element oluşturuyor. Doğal olarak bu elementi block level yapabilir, genişlik yükseklik tanımlayabilir, posizyonlamasını istediğiniz gibi ayarlayabilirsiniz.

Çok yaygınlaşan bir kullanımla, bir elementin başına veya sonuna eklemek istediğiniz ufak simgeleri, resimleri veya işaretçileri bu sözde seçicilerle yaratabilirsiniz.

Basit örnekle size linklerinize simgeler koyabilmeyi anlatacağım. Biliyorsunuz HTML öznitelik seçicileri var css’de ve “target” özniteliği “_blank” olan bir linki diğerlerinden ayrı bir şekilde seçebilirsiniz. a[target=”_blank”] seçicisi dış bağlantıları seçecektir.

Bu kod dış baglantıyı gösteren bir a elementinin sonuna inline-block türünde bir element ekleyecek ve içeriğini boş bir şekilde ayarlayacaktır. Genişlik ve yüksekliğini 16px olarak ayarlayıp art alanını da bir simgeyi olarak ayarladığımızda linkin sonunda bu simgeyi görebileceğiz:

Bu sözde elementlerini şu tarayıcılar destekliyor:

  • Chrome 2+
  • Firefox 3.5+
  • Safari 1.3+
  • Opera 9.2+
  • IE8+ (Ufak problemlerle beraber)

Bu sözde elementlerle yarattığınız içeriğin sadece görsel amaçlarla kullanılmasi gerektiğini unutmayın, birçok erişilebilirlik okuyucusu veya tarayıcısı bu elementleri okuyamadığı için fonksiyonalitenizi bozacak içerikleri bu elementlerle kullanmamaya dikkat edin.

Bu yazıda çok yaratıcı örneklerini görmediniz fakat ne işe yaradıklarını bilmeniz ileride deney yapmanızı kolaylaştıracaktır veya karşılaştığınızda daha kolay anlamanızı sağlayacaktır.

HTML5 Form Özellikleri

HTML5 git gide daha popülerleşiyor ve eski html kodlarının yerini, daha sade html5 kodlarına bıraktığını, daha önce javascript eklentileriyle yaptığımız bazı şeyleri yeni html5 tanımlamasında yeni özellikler olarak görmeye başladık.

Özellikle mobile web uyumlu sayfalar yaygınlaştıktan sonra html5 tanımlamaları sadece masaüstü bilgisayar tarayıcıları değil mobil tarayıcılar için de özel yetenekler içermeye başladı.

Eğer birkaç yıldır güncellenmeyen bir tarayıcınız varsa HTML5 formların tüm özelliklerini desteklemeyebilir fakat güncel ve modern tüm tarayıcılar birçok html5 form özelliğini destekliyor.

İşte yeni html5 form özelliklerinden bazıları…
Okumaya devam et “HTML5 Form Özellikleri”

javascript alert fancy

Javascript alert’in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla

şeklinde ürettiğiniz onay/hata/mesaj kutusunu

çok benzer kullanımla

şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya çevirmeye.

Okumaya devam et “javascript alert fancy”