Context Aware Front End

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

Transcript

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