12
Muharrem Taç M2 Bilişim © 2011 M2 Bilişim HTML 5 HTML 5 HTML dilinin son sürümüdür.Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir.

HTML5 ve Phonegap

Embed Size (px)

DESCRIPTION

Bir kurum için hazırladığımız HTML5 ve Phonegap sunumu.

Citation preview

Page 1: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

HTML 5

HTML 5 HTML dilinin son sürümüdür.Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir.

Page 2: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

HTML 5 CSS3 JavaScript

Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecektir. Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.

Ses veya film etiketleri gibi bir çok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web uygulamaları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda bir çok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.HTML5 tüm HTML Sürümleri (HTML1.0 vb) ile uyumludur

(Wikipedia)

Page 3: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

TARİHÇE

1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless Web Design2005 AJAX2009 HTML 5

Page 4: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

Etiketler

<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.<audio>: Sayfaya ses oynatıcı bir modül ekler.<video> : Video oynatıcı bir modül ekler.<progress> : İşlem süreci göstergesi ekler.<caption> : Başlık olarak düşünülen metinleri düzenler.<header> : Sitenin başlık ve açıklama içeriğini alır.<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.<footer> : Sitelerin en alt kısmını içine alır.<section> : Sitelerin ana içerik kısmını içine alır.<aside> : Ana içerikte ayrı yazılan kısımdır.<article> : Makale, deneme tarzı yazıları kapsar.<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)<details> : Detay bilgisi içerir.<summary> : Yazının başlığını belirler.<time> : Tarih, saat verilerini kapsar.<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.<figcaption> : <figure> elementinin başlığını belirler.<figure> : Çeşitli medya içeriği gruplarını belirler.<hgroup> : Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.<datalist> : Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar.

Page 5: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

Bazı yetenekler

Offline Storage (Web Storage, Web SQL DB,Indexed DB, Application Cache)

Realtime / Communication (Web Workers, Web Socket, Notifications)

File / Hardware Access (Native Drag & Drop,Desktop Drag-In, Desktop Drag-Out, FileSystem APIs, Geolocation,Device Orientation,Speech Input)

Graphics / Multimedia (Audio + Video, Canvas 2D, Canvas 3D WebGL, SVG)

http://slides.html5rocks.com/

Page 6: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

CSS 3

CSS 3 W3 Consortium tarafından yeni nesil CSS standardı olarak belirlenmiştir.HTML sayfalarına görsel açıdan pek çok yeni yetenek kazandırmaktadır.Fakat IE, Opera ve Firefox tarafından tamamen desteklenmemekte, Webkit mototunu kullanan Chorme ve Safari tarafından yoğun olarak desteklenmektedir.Mobil cihazların büyük çoğunluğunda(Android, iOS, RIM OS) Webkit motoru kullanılmaktadır bu yüzden CSS3’ün pek çok özelliği mobil cihazlarda kullanılabilir.

Page 7: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

JavaScript ve JavaScript Kütüphaneleri

JavaScript uzun yıllardan beri web browserlarda ana yazılım dili olarak kullanılmaktadır. Bir dönem VBScript gibi alternatifleri vardı ancak kalıcı olmadı.Google tarafından Dart adlı yeni bir dil üzerinde çalışılmaktadır.

JavaScript için kolay ve crossbrowser yazılım yapmak amaçlı pekçok kütüphane / framework üretilmiştir.

Bazıları :

jQuery (mobil cihazlar için jQuery Mobile)jQtouchSencha touchExtJSDojoMooToolsYUI

Page 8: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

PhoneGap

PhoneGap Nitobi tarafından duyurulmuştur, Nitobi Adobe tarafından alınmıştır,

Aynı kod yapısı ile pek çok mobil cihaz için ile aynı uygulamanın üretilmesini sağlamak amacındadır.

HTML5 + CSS 3 + JavaScript kullanılmakta ve uygulamanın içerisinde aslında browser açmaktadır.

Browser’a dış kaynaktan erişen kodların normalde güvenlik sebebiyle izni olmayan donanım özelliklerine erişmesine izin verilmesi için kütüphaneler yazılmıştır.

Mobil JavaScript kütüphaneler ile kullanılabilir. (jQuery Mobile, jQtouch, Sencha touch gibi)

Page 9: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

Desteklenen Sistemler

AndroidiOSSymbianBlackberryWindows MobileBadawebOS

Page 10: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

Desteklenen Özellikler

Page 11: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

PhoneGap Avantajları

Aynı kodlama ile farklı platformlarda uygulama geliştirmeGelecek nesil web deneyimini uygulamaGeniş communityBaşarılı dökümantasyonAdobe desteği

Page 12: HTML5  ve Phonegap

Muharrem TaçM2 Bilişim

© 2011 M2 Bilişim

PhoneGap Dezavantajları

Bazı donanım özelliklerine erişememeHer cihaz için yine o cihaza uygun ugulama geliştirme gereksinimiNative uygulamalara göre düşük performans