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.

Photoshop ile grafikleri web için optimize etmek

Internette kullanacağımız grafiklerin boyutları her zaman için önemlidir. Grafikleri web için optimize etmeye yönelik çok fazla program var piyasada.. Bazıları çok kaliteli, fakat bunun için herhangi bir ekstra program kullanmanıza gerek yok.

Gimp kullanırken bile webde kullanacağım grafikleri photoshop ile optimize ediyordum. Photoshop’un save as web seçeneği ile çıkan pencere ile olacak bütün işimiz, Aynı zamanda bu mekanizmayı Adobe ImageReady programı ile de yapabilirsiniz. Şimdi gelelim nasıl olacağına ve detaylara.

Photoshop ile çizdiğimiz bir grafiği (örnek olarak şöyle bir çalışma yaptık) optimize etmek istiyoruz

Okumaya devam et “Photoshop ile grafikleri web için optimize etmek”