SENCHA TOUCH HTML 5 MOBILE FRAMEWORK Tayfun Öziş ERİKAN lab2023 - internet teknolojileri Tuesday, October 1, 13

Ben kimim ? lab2023’ kurucu ortağı Web geliştirici Ruby / Rails , ExtJS, Sencha Touch, Sass, Compass Front-end & Graphic, UI, UX Çaylak iOS Developer... tayfun.ozis.erikan@lab2023.com - @toziserikan www.tayfunoziserikan.com Tuesday, October 1, 13

Ajanda Web teknolojilerinin önemi HTML5, CSS3 ve JavaScript Sencha Touch Uygulama Mimarisi Tema sistemi Yayınlama ve dağıtma Tuesday, October 1, 13

HTML5 <3 RIA: Zengin İnternet Uygulamaları ile daha interaktif web uygulamaları haırlanmak eskiye göre daha da kolaylaştı. Web tarayıcıların gelişmesi İnsanların internet kullanım alışkanlıklarının artması Birçok yeni JavaScript framework çıktı ve JavaScript kullanımı yaygınlaşmaya başladı CSS çok gelişti ve CSS3 destekleyen tarayıcılar yaygınlaştı Yeni HTML attirbute’lar ile web sayfalarında daha zengin içerikler daha kolay bir şekilde hazırlanabilmekte. Tuesday, October 1, 13

JavaScript Tarayıcıların JavaScript yorumlama performansı arttı Webkit çekirdeği gelişti ve yagınlaştı. Google V8 gibi güçlü JS Engine’ler geliştirildi. JavaScript popüler bir dil haline geldi. GitHub’da en yaygın dillerden birisi. JavaScript 2.0 - ECMAScript Harmony geliştirilmeye devam etmekte. NodeJS, Socket etc. Tuesday, October 1, 13

CSS3 Web uygulamalarını stillendirmek çok daha kolay Tarayıcılar yeni görsel yeteneklerle donatıldı. CSS pre-processorler ile daha efektif stillendirme yapılabiliyor. CSS3 animasyonları SASS, COMPASS etc Tuesday, October 1, 13

Sencha Sencha, ExtJS Javascript Framework’ü geliştiren firmadır. Dünya çapında sencha 2 milyon geliştirici vardır 70‘den fazla organizasyon topluluğu vardır Aktif bir forumu bulunmaktadır Community desteği geniştir Ürünleri 5 milyondan fazla kez indirilmiştir 25‘den fazla servis partneri bulunmaktadır Tuesday, October 1, 13

Mobile Frameworks Tuesday, October 1, 13

Sencha Touch Tuesday, October 1, 13

Sencha Touch Nedir ? Web standartlarında geliştirilmiştir. İlk HTML5 Mobil Framework’tür. Tamamen HTML5 ve JavaScript kullanılarak geliştirildi. Mobile WebKit platformuna odaklandı. iOS, Android, Blackberry, Palm ve Windows Mobile. JavaScript ile hazırlayıp birçok ortamda çalıştırabilirsiniz. Tuesday, October 1, 13

Web Mobil Uygulamaları... Tuesday, October 1, 13

UI Araçları Komponentler Listeler, tablar, butonlar, modallar etc. Dokunmatik Olaylar (Touch Events) (Tap, Double Tap, Tap&Hold, Swipe, Pinch, Drag&Drop) Tamamen Özelleştirebilme. SASS ile stillendirme. Tuesday, October 1, 13

UI Komponentleri Button Toolbar Panel Field, Fieldset Form Media (image-video) Tabbar, Carousel Nested-list Picker Message Box....... Tuesday, October 1, 13

Uygulama Mimarisi OOP, MVC Device Detection Orientation Layouts Animations Ext4 - Class system ExtJS Data Package Genişletilebilir Tuesday, October 1, 13

Uygulama Mimarisi Tuesday, October 1, 13

Uygulama Mimarisi Tuesday, October 1, 13

Veri Paketi Models, stores & proxies Validations &Assocations Offline storage, Memory, session proxy AJAX & JSONP RESTful Readers & Proxies Tuesday, October 1, 13

Tema Sistemi CSS3 SASS & COMPASS Özelleştirilebilir Optimize edişmiştir ve yüksek performanslıdır 300+ hazır ikon CSS3 animasyonlarını kullanır Birçok çözünürlükte sorunsuz çalışır Bitmap yerine vektör görsel kullanır Tuesday, October 1, 13

API Dokumantasyonu Tuesday, October 1, 13

Sencha Command Code generator JS Compiler Web Server Packaging Build scripts Image Capture Logging Code generator hooks Tuesday, October 1, 13

Paketleme ve Dağıtım Tuesday, October 1, 13

Sencha Architect Tuesday, October 1, 13

Sencha Animator Tuesday, October 1, 13

Paketleme ve Dağıtım Sencha Command PhoneGap Tuesday, October 1, 13

Yol Haritası Dokumantasyonu baştan aşağıya okuyun Forum’da takılın soru sorun Sencha Touch Kaynak kodunu okuyun JavaScript’inizi geliştirin Mutlaka SASS öğrenin Sık sık test edin Tuesday, October 1, 13

Demo zamanı... API Dokumantasyonu... Hello World app... iOS Simulatorde çalıştırma... Tuesday, October 1, 13

Teşekkürler Soru & Cevap... Tuesday, October 1, 13