context aware front end
TRANSCRIPT
Daha iyi bir kullanıcı deneyimi için
Context Aware Front-End
@gozdeberberoglu #contextaware
Gözde Berberoğlu Özen Doğuş Yayın Grubu Arayüz Geliştirici
gozdeberberoglu
gozdeberberoglu.com
@gozdeberberoglu #contextaware
Nelerden bahsedeceğiz?
• Context aware front-end nedir?
• Nasıl uygulanabilir?
• 4. seviye media query
• Örnekler
• Sonuç
• Soru-cevap
@gozdeberberoglu #contextaware
Context tasarımı etkileyebilir mi?
@gozdeberberoglu #contextaware
Context aware front-end
Doğru zamandaDoğru kişi
Doğru içerik
@gozdeberberoglu #contextaware
Elimizde neler var?
• Javascript
• HTML5 ile gelen özellikler
• 4.seviye media query’ler
@gozdeberberoglu #contextaware
Context aware web için bileşenler neler?
Bileşenler
@gozdeberberoglu #contextaware
Kullanıcı Görev Ortam Teknoloji
Web sitesini değiştiren tüm bileşenler
bağlamsal kırılma noktalarını oluşturur.
@gozdeberberoglu #contextaware
Bu örnekte bizim kırılma noktalarımız sabah, öğle ve akşam ve hava sıcaklığıdır.
@gozdeberberoglu #contextaware
nomejs.com contextual awareness için hazırlanmış bir
javacript kütüphanesi.
@gozdeberberoglu #contextaware
light-level
• @media(light-level: dim){}
• @media(light-level: normal){}
• @media(light-level: washed){}
Kullanıcının bulunduğu ortamdaki ışık bilgisini veriyor.
@gozdeberberoglu #contextaware
pointer
• @media{pointer:none}
• @media{pointer:coarse}
• @media{pointer:fine}
İşaretçinin, tıkladığı hedef alandaki etkisini gösterir.
@gozdeberberoglu #contextaware
hover
• @media{pointer:none}
• @media{pointer:on-demand}
• @media{pointer: hover}
Kullanıcının cihazında hover özelliği olup olmadığı bilgisini verir.
@gozdeberberoglu #contextaware
Pointer ve hover kombinasyonları
@gozdeberberoglu #contextaware
Örnekler
Örnekler
Apple IOS 9 Proactive
@gozdeberberoglu #contextaware
Neden kullanmıyoruz?
• Kodlama ve tasarım için fazladan zamana ihtiyacımız var.
• Buna bağlı olarak yaptığımız işin maaliyeti artıyor.
• Mevcut teknolojiler hala gelişme aşamasında.
• Düşünceli olmayı ve hayal gücünü kullanmayı gerektiriyor.
Sonuç
@gozdeberberoglu #contextaware
Kullanıcımıza, o daha farketmeden
ihtiyacına göre içerik sunabiliriz.
Teşekkür ederim.
Gözde Berberoğlu Özen
@gozdeberberoglu gozdeberberoglu.com