W3C, bugün (09.12.2009) bir taslak yayınlayarak yeni önerisini sundu. Bu çalışma, javascript yardımıyla kameradan anlık görüntü, mikrofondan ise ses alabilmeyi sağlayacak bir API için yazılan ilk draft.

Çalışma oldukça enteresan ve enteresan olduğu kadar bütün web geliştiricileri heyecanlandıracak türden. Özellikle sosyal ağ platformu çılgınlığının sürdüğü ve şekil değiştirerek sürmeye devam edeceği bu dönemde, böyle bir özellik gerçekten çok farklı hizmetlerin sunulmasında kullanılabilir.

Elbette ki bu tip uygulamalar Flash ile yapılmakta ve yapılacak da. Mesela gerçekten güzel bir (yerli) uygulama olan, üyelik kartınız için gereken fotoğrafı anında çekip kartta size gösteren Müzekart uygulaması gibi. Ancak bu tip işlemlerin, javascript ile çok farklı alanlara ve geliştirici kitlesine yayılacağı da kesin.

Taslağı kabaca incelediğimde, kameradan bir görüntü yakalamak için ihtiyaç duyulacak kod aşağı yukarı şu kadar:

// Create a container div element and append it to the document body.
var container = document.createElement("div");
document.body.appendChild(container);

// The browser viewport width in pixels.
var screenWidth = window.innerWidth;

function successCallback(data) {
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].uri;
// If the image width exceeds that of the browser viewport, the image
// is scaled to fit the screen keeping the aspect ratio intact.
if (data[i].format.width> screenWidth) {
img.style.width = screenWidth + "px";
img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
}
container.appendChild(img);
}
}

function errorCallback(err) {
alert(err.message + " (" + err.code + ")");
}

// Launch the device camera application and invoke the callback once
// the user exits the camera application.
transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);

Gerçekten ilgi çekici değil mi?

Son olarak tabi ki W3C Taslağına ulaşmak için: http://dev.w3.org/2009/dap/camera

Bugün genellikle pek yazmadığım türden bir habere yer vereceğim. 3M'in servisleri arasına kattığı VAS (Visual Attention Service), bir resimde, dikkat çeken alanların neler olduğunu yazılımsal olarak tespit edebiliyor.


Özellikle ürün ve ambalaj tasarımı yapanlar için gerçekten işleri ciddi oranda kolaylaştıracak (ve büyük ihtimalle ucuzlaştıracak) bir yöntem. Sistem henüz beta üyelik kabul ediyor, ücretlendirmesi belli değil. Hazırladığınız bir ürün görselinin, kullanıcılar tarafından nasıl algılandığını anketlerle tespit etmek pahalı olacağı gibi objektif sonuçlar elde etmek de çok mümkün olmayacaktır. VAS'ın kullandığı bilimsel teknikler, kişilerin istemli veya istemsiz olarak dikkatini çeken bölgeleri algılayabiliyor. VAS ile ilgili genel bilgiyi: http://www.3m.com/VAS adresinden alabilirsiniz. Beta üyelik için de https://vas.3m.com/Account/Register adresini kullanabilirsiniz.

3M'in kendi sitesindeki tanıtım ve teknoloji anlatım yazısına (güzel görseller kullanılmış) buradan ulaşabilirsiniz.

Gelelim denemelere. Bir deneme hesabı oluşturup bir kaç deneme yaptım. Öncelikle ortağımın somon füme firması Delicco'nun bir ürün ambalajını test ettim.

Yüklediğim görsel:

Dikkat çeken bölgeler (sıcaklık analizi):

Odak noktaları:

Her ne kadar tasarım uzmanı olmasam da sonuçların pek iç açıcı olmadığını düşünüyorum. Sıcaklık analizi, tasarımdaki kuşakların daha fazla dikkat topladığını ve logo/ürün gibi ana noktaları dikkatten kaçırdığını gösteriyor.
Odak noktası analizi ise biraz daha iyi, en azından logoya yakın bir bölge tek odak noktası ambalajda...

Daha sonra daha bildik tasarımlarla bir deneme yapmayı düşündüm ve Coca-Cola'nın bir tasarımını denedim. Gerçekten tasarımın ne kadar önemli olduğunu fark edip, aşağıdaki detaylarla şaşıracaksınız :)

Yüklediğim görsel:

Dikkat çeken bölgeler (sıcaklık analizi):

Odak noktaları:

Sıcaklık analizinin tamamen logo üzerine yayıldığını görebiliyoruz. Odak noktlar da tamamen logo üzerine yayılmış ve neredeyse logonun tamamını kaplamış durumda. Delicco tasarımında olduğu gibi burada da dikkat çeker gibi görünen kuşaklar olmasına rağmen kişinin dikkatini cezbetmediğini açıkça görebiliyoruz. Ve bence bu Coca-Cola tasarımının başarısının sırrı, sıcaklık dağılımda da belli olan ve odak analizinde de 4 numaralı odağa sahip olan bardağın üstünden görünen buz. Herhalde Coca-Cola'nın vurgulamak isteyebileceği en önemli unsurlardan biri bu görselde ve bunu başarmışlar. Tasarımda sadece Coca-Cola Classic yazıları ve buz ilgi ve odak noktası.

3M ürününün bilimsel tabana dayandığını belirtiyor ve bu konuda iddialı. Her ne kadar ürün henüz beta sürecinde olsa da bana gerçekten başarılı geldi. Ücretlendirmesine bağlı olarak ürünlerini ve paketlerini konumlandırmayı deneyen firmalar için çok başarılı bir çözüm olabileceği kanısındayım...

SQLServerCentral'da, SQL Server Analysis Services üzerindeki karar ağacı motoru ile ilgili çok güzel ve adım adım bir makale yayınlandı. Konuya hakim olmayanların rahatlıkla takip edip bilgi edinebilecekleri bir başucu kılavuzu olmuş.


Tesadüfen bulduğum RegExr, online ve real time olarak verdiğiniz metin üzerinde girdiğiniz Regular Expression tümcesini deneyip sonuçları gösterebiliyor. Gerçekten kullanımı çok pratik bir uygulama olmuş.


Ancak farklı platformlarda farklı davranışlar gösteren Regular Expression tümceleri açısından nasıl bir davranış sergileyeceğini deneme fırsatım olmadı. Flash tabanlı olduğu için Flash içerisindeki moturu kullanıyor. Zaten Regular Expression tümcenizi girdikten sonra, yaptığınız girişin üzerinde fareniz ile gezindiğinizde, Flash tabanlı çıkması olası sorunlarla da ilgili bilgilendiriliyorsunuz.

Denemeye değer, ama yine de saç baş yolmadan önce farklı motorlarda da denemek lazım tümceleri...

Daha önce bir çok sistem için sanal POS entegrasyonu yapmıştım. Uygulamaları yaptığım ve jenerik kütüphanelerimi yazdığım dönemlerde "3D Güvenlik" uygulaması yoktu. Daha sonra entegre ettiğim bütün sistemler de POS başvurularını önceden yaptıkları için 3D çözümleri kullanmasına gerek yoktu ve kütüphanelerim çalışmıştı.

Ancak yakın zamanda yaptığım bir geliştirme yeni başvuru olduğu için 3D Güvenlik uygulamalarının kullanılmasını gerektirdi. Bu yüzden bu konuyla ilgili araştırma yapmak ve kod yazmak zorunda kaldım. İnternet üzerinde çok doyurucu kaynaklar bulamadım. Bankalardan alınan dokümantasyonlar da maalesef çok yeterli değildi. Bu yüzden bir çok noktayı deneme-yanılma ile keşfetmek zorunda kaldım.

Çalışmalarımın ardından, toparladığım bilgileri birarada düzenleyip 20 yansılık bir sunu çıkardım. Aşağıda SlideShare üzerinde paylaştığım sunuyu bulabilirsiniz.

Umarım birilerinin işine yarar ve en azından mantıkları kavramasına yardımcı olur...



Henüz 4. beta sürümü yayınlanmış olan Firefox 3.6 da gördüğüm ve bence biraz daha geliştirmeyle bir CSS standardı haline gelebilecek bir style var.

pointer-events:none;
Bu style none ve auto olmak üzere iki değer alabiliyor. Yaradığı işi de şu şekilde açıklayayım. Üstüste binen nesnelerde (örneğin iki div), mouse event'leri, biliyorsunuz üstteki nesnede yakalanır, alttaki nesneye geçmez. Bu sebepten dolayı, aşağıdaki nesnede a gibi, input gibi nesneler mevcutsa, kullanıcının bunlarla mouse aracılığı ile etkileşime girmesi mümkün değildir. Firefox 3.6 bu gibi durumlarda, üstteki elemana pointer-events:none style'ı verilerek sorunun çözülmesini sağlıyor. Bu özelliğe sahip nesne mouse işlemlerini yakalamıyor, alttaki elemana geçiriyor. Bu sayede alt nesnede bulunan nesneler çalışıyor, bu nesne ile etkileşime girilebiliyor.

Bazı noktalarda gerçekten hayat kurtarıcı olabilecek bu özelliğin kısa sürede CSS standardı olmasını diliyorum. Canlı bir örneği görebilmek için en az bir Firefox 3.6b4'e ihtiyacınız olacak. Henüz resmi olarak yayınlanmadığı için bu sürümü http://www.mozilla.com/en-US/firefox/all-beta.html adresinden indirip kurmanız gerekmekte. 3.5.5 sürümü ile yanyana çalışabiliyor sürüm.
Kurulumunuzu tamamladıktan sonra http://demos.hacks.mozilla.org/openweb/pointer-events adresini ziyaret ederek canlı bir uygulama görebilirsiniz. Üstünde gradient bir dolgu efekti olan div, a nesnelerinin dizili olduğu başka bir div'in üzerine getirilmiş. Burada gradient efektinin olduğu sağ bölgedeki linklere erişmek mümkün olmuyor, çünkü mouse event'ları üstteki gradient div'i tarafından yakalanıyor. Ancak hemen alttaki işaret kutusunu seçtiğinizde artık bu linklere de erişilebilmeye başlıyor.

Gerçekten web programcılarının ve tasarımcılarının hayatını kurtarabilecek bir özellik. Umarım kısa sürede Trident ve Webkit engine'lerine de girer ve biz de gönül rahatlığı ile kullanmaya başlayabiliriz...

*** Ekleme: 02.12.2009 17:51 ***
Bu sayfayı Google Chrome, Safari, Opera ve IE üzerinde de denedim. Chrome ve Safari'de de özelliğin çalıştığını gördüm (we love webkit). Opera üzerine gelen div'i yorumlayamadığı için deneme şansım olmadı. Linkler hep çalışıyordu. IE ise sayfayı açamadı bile :) Yorum sizin...

LABjs isimli bir proje (http://labjs.com), web sayfalarına dışarıdan yüklediğimiz (js gibi) dış kaynakların yüklenmesini optimize etmeye yönelmiş bir Javascript kaynağı. Dış kaynakların aynı anda (veya sizin belirteceğiniz bir sıralama ile) yüklenmeye başlamasını sağlayabiliyorsunuz.

Bu tip bir iyileştirmenin Firefox 3.5 ile geldiğini biliyoruz. Kısmen (tarayıcının tanımlayabildiği) ilişkisi bulunmayan kaynaklar aynı anda yüklenmeye başlanarak önemli bir kaynak artışı sağlamışlardı.

Firefox 3.0'da bazı kaynakların yüklenmesi aşağıdaki şekildeyken (16.84 saniye):



Firefox 3.5'te kaynakların yüklenmesi bir miktar hızlanmıştı (10.69 saniye):



Ancak görebildiğiniz gibi hala bazı kaynaklar paralel yüklemeye maruz kalmıyorlar. Bunun sebebi yukarıda bahsetmeye çalıştığım tarayıcının kararverdiği öngereklilik koşulları.

Bu örnekte de LABjs tarafından önceliğe konulmuş dış kaynakların yüklenmesini görebilirsiniz (6.24 saniye):



Görüldüğü gibi LABjs önemli bir performans artışı daha sağlamış oluyor. Konuyla ilgili detaylı bir incelemeyi (resimleri da aldığım kaynak olan) http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading adresinden okuyabilirsiniz.

Ancak tavsiye, yukarıda belirttiğim sitede yazan uyarılara gözatmadan sistemlerinize entegre etmeyin. Bu uyarıları "Are there any negative side effects?" başlığı altında görebilirsiniz.

Kendim yaptığım testleri derli toplu hale getirebilirsem burada yayınlayacağım...

Copyright Ali INAL ©2009 - Creative Commons Licence
preload preload preload

Taşındık!


Ali's Surprisingly Web blog'u, artık yeni, güçlü ve daha esnek altyapısıyla yeni adresinden yayın yapıyor. Yeni adresimiz: http://surprisingly.web.tr. Bu eski blog sayfalarındaki bütün içerik, yeni blog altyapısına da taşındı. Arzu ederseniz sizi yeni blog'umda ağırlamak isterim.
Yeni blog'a gitmek istiyorum Bu sayfayı okumak istiyorum

We've Moved!


Ali's Surprisingly Web Blog is now serving from a new, stronger and flexible system with a brand new address. Our new address: http://surprisingly.web.tr. Also we've migrated all old content from this blog to our new blog. If you wish, I want to welcome yo to my new blog.
I want to visit new blog I want to stay and read this page