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