2. Mobil Web’e Giriş Mobil? Gezici, hareketli, oynak, + TAŞINABİLİR Web? « ...»
3. Mobil Web’e Giriş MOBİL WEB GEREKLİ MİDİR? ERİŞİLEBİLİRLİK İÇİN GEREKLİDİR!
4. Mobil Web’e Giriş Mobil cihazların etkileşimi farklıdır. Onlar dokunmanıza ve sarsmanıza tepki verebilirler. Mobil cihazların standartları farklıdır. Onlar farklı boyutlarda ekranlara ve cihazın pozisyonuna göre değişen width height değerlerine sahiptir. Mobil cihazlar internete bağlanma kaynakları farklıdır. Onlar genellikle hücresel haberleşme operatörlerini kullanırlar.
6. Mobil Web’e Giriş BASİT? Mobil cihazlar, mobildir! Basit, bir şeyi anlaşılır kılar. Basit olanın uygulaması görece kolay ve hızlıdır. Bir şey karmaşık olmak zorunda mı? sadeleştirme yapın, matematik bunun için de var.
7. Mobil Web’e Giriş ESNEK? Mobil cihazlar farklı ekran çözünürlüklerine ve farklı boyutlara sahiptir. Liquid tasarımlar yapmak width ve height değerlerini düşünerek içerik yerleşimini scroll olmadan da görünür kılmak önemlidir.
8. Mobil Web’e Giriş HIZLI? Hücresel şebeke operatörlerinin her yerde yüksek hızlı internet hizmeti sağlayamaması ve mobil cihazların bağlantı hızlarındaki farklılaklardan dolayı mobil web sitelerinin hızlı olması gerekmektedir. Mobil internetin kullanılan kb başına maliyetinin yüksek olduğu da unutulmamalıdır.
15. Mobil Web’e Giriş * Standart html ve xhtml kodlama mobil cihazlar için de geçerlidir. * Pek çok css özelliği desteklenmektedir. JavaScript’de ve DOM’da durum biraz farklıdır! * Sonraki slide’larda css kutu yapısına ve html kodlama yapısına örnek verilmeyecektir.
16. Mobil Web’e Giriş Kodlamaya başlamadan önce! Mobil web sitesinin doğru görüntülenebilmesi için. Ekran konumu ve çözünürlüğü bilinmelidir. Ekran konumu: Landscape ya da portrait. Çözünürlük: Width ve height değerleri.
17. Mobil Web’e Giriş JavaScript ile ekran çözünürlüğünü ve konumu öğrenmek. Function screenChange(){ var orientation = window.orientation ; switch(orientation) { case 0: alert(«portrait» + window.innerWidth ) break; case 90: alert(«landscape» + window.innerWidth ) break; case -90: alert(«return - landscape» + window.innerWidth ) break; } } screenChange(); <body onorientationchange=«screenChange()» >
