The Frontiers Mini 20 Haziran 2015 Bahçeşehir Üniversitesi

1. Daha iyi bir kullanıcı deneyimi için
Context Aware Front-End
@gozdeberberoglu #contextaware

2. Gözde Berberoğlu Özen
Doğuş Yayın Grubu
Arayüz Geliştirici
gozdeberberoglu
gozdeberberoglu.com
@gozdeberberoglu #contextaware

3. Nelerden bahsedeceğiz?
• Context aware front-end nedir?
• Nasıl uygulanabilir?
• 4. seviye media query
• Örnekler
• Sonuç
• Soru-cevap
@gozdeberberoglu #contextaware

4. Context(Bağlam) nedir?
@gozdeberberoglu #contextaware

5. Context tasarımı etkileyebilir mi?
@gozdeberberoglu #contextaware

6. Ekran genişliği ve ötesi
@gozdeberberoglu #contextaware

7. Context aware front-end
Doğru zamanda
Doğru kişi
Doğru içerik
@gozdeberberoglu #contextaware

8. Elimizde neler var?
• Javascript
• HTML5 ile gelen özellikler
• 4.seviye media query’ler
@gozdeberberoglu #contextaware

9. Geolocation
@gozdeberberoglu #contextaware

10. Orientation
@gozdeberberoglu #contextaware

11. Network
@gozdeberberoglu #contextaware

12. Context aware web için
bileşenler neler?

13. Bileşenler
@gozdeberberoglu #contextaware
Kullanıcı Görev Ortam Teknoloji

14. Web sitesini değiştiren tüm bileşenler
bağlamsal kırılma noktalarını
oluşturur.
@gozdeberberoglu #contextaware

15. Bu örnekte bizim kırılma noktalarımız sabah, öğle ve akşam ve hava sıcaklığıdır.
@gozdeberberoglu #contextaware

16. nomejs.com
contextual awareness için hazırlanmış bir
javacript kütüphanesi.
@gozdeberberoglu #contextaware

17. 4. seviye media query
@gozdeberberoglu #contextaware

18. 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

19. pointer
• @media{pointer:none}
• @media{pointer:coarse}
• @media{pointer:fine}
İşaretçinin, tıkladığı hedef alandaki etkisini gösterir.
@gozdeberberoglu #contextaware

20. 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

21. Pointer ve hover kombinasyonları
@gozdeberberoglu #contextaware

22. Örnekler

23. Örnekler
@gozdeberberoglu #contextaware

24. Örnekler
Yahoo Weather Zomato
@gozdeberberoglu #contextaware

25. Örnekler
Google Now
@gozdeberberoglu #contextaware

26. Örnekler
Apple IOS 9 Proactive
@gozdeberberoglu #contextaware

27. 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.

28. Sonuç
@gozdeberberoglu #contextaware
Kullanıcımıza, o daha farketmeden
ihtiyacına göre içerik sunabiliriz.

29. Teşekkür ederim.
Gözde Berberoğlu Özen
@gozdeberberoglu
gozdeberberoglu.com