Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Mobile Frameworks Tuesday, October 1, 13

Slide 9

Slide 9 text

Sencha Touch Tuesday, October 1, 13

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Uygulama Mimarisi Tuesday, October 1, 13

Slide 16

Slide 16 text

Uygulama Mimarisi Tuesday, October 1, 13

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

API Dokumantasyonu Tuesday, October 1, 13

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Sencha Architect Tuesday, October 1, 13

Slide 23

Slide 23 text

Sencha Animator Tuesday, October 1, 13

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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