Photoshop Magazin
 


HTML5 ve FLASH -1

01 July 2010 | Sayı: Jul 2010
 
1 2 3 4 5
 

Flash ve HTML5 karşılaştırmaları, son zamanlarda sıkça karşılaştığımız bir konu haline geldi. HTML5 duyurulduğundan beri sonu gelmeyen bu karşılaştırmaların tarafsız sonuçlarını sunan birilerini görmek de imkânsız hale geldi. Özellikle Flash severler ve Flash geliştiricileri HTML5’in Flash’a rakip olmasına gülüp geçerken, HTML5´in daha hazır olmadığını ve bu nedenle Flash’ın yerini alamayacağını düşünüp yaptıkları kıyaslamalarda hep Flash’ın daha iyi olduğundan bahsederler.

Diğer yandan Flash’ın eski bir teknoloji ve hantal olduğunu düşünenler HTML5 teknolojisinin çıkmasıyla Flash'a gerek kalmadığını HTML5' in Flash’a gerek duymadan Flash’ın yaptığı her şeyi yapabileceğini iddia ediyorlar. Büyük çoğunluğu Flash’ı sevmeyen HTML5 severler bu yeni teknolojinin web dünyasına çok şey katacağından ve kesinlikle Flash’ın yerini alacağından bahsederler.

Peki, bu olay nasıl başladı? Gerçekte hangisi daha iyi veya gerçekten daha iyi olan biri var mı? Flash gerçekten tarih mi olacak, yoksa HTML5 sadece abartılmış bir teknoloji mi?
Biz elimizden geldiğince tarafsız bir şekilde bu kıyaslamayı yapıp sizlere detaylarıyla birlikte sunmaya çalıştık. Ama öncesinde bu olay nasıl gelişti kısaca bahsedelim.

Flash Nedir?
Flash, çoğu kişinin bildiği üzere, Macromedia firması tarafından geliştirilen ve daha sonra Adobe’nin Macromedia’yı satın almasıyla Adobe bünyesine geçen bir grafik animasyon ve web tasarım uygulama programıdır. Flash günümüzde birçok tasarımcı tarafından kullanılmaktadır. Yapılan birçok web site artık ya Flash tabanlı ya da Flash öğelerini içermektedir. Ayrıca Flash Player (Flash ile yapılan uygulamaları çalıştırabilmek için) bilgisayarların %90’nından fazlasında yer almaktadır.

Flash’ın bu derecede yaygınlığıyla beraber elbette eksikleri de mevcut. Özellikle HTML5 ile kıyaslama yapanlar tarafından en çok Flash’ın güvenlik açıklarının bulunması ve gereğinden fazla donanımı zorlaması şikâyetleri dile getiriliyor.

HTML5 Nedir?
HTML5, .html dilinin son sürümüdür. Şuan kullanılan .html sürümü 4,1’dir. Mevcut sürümünün bazı ihtiyaçları karşılayamaması HTML5’i doğurdu. Tamamen yeni ve gelişmiş olan bu teknolojiyi YouTube’da video Player’ları üzerinde denemektedir. Günümüzde bazı tarayıcılar tarafından kısmen desteklenmektedir. Opera, Chrome ve Safari son çıkardığı sürümlerle HTML5’i tamamen desteklemektedir.

Apple ve Adobe Tartışması

HTML5’ten önce araları oldukça iyi olan Apple ve Adobe HTML5’in geliştirilmesiyle araları açıldı. Apple HTML5’in harika bir teknoloji olduğunu ve Flash’ın güvenlik açıklarıyla dolu, hantal ve sistemi yorduğunu dile getirmesi aradaki gerginliği başlatmış oldu. 



Zaten bilindiği üzere iPhone’larda Flash Player mevcut değildi. Tam da gerginliğin arttığı dönemde Apple’ın iPad’i tanıtması ve aynı sebeplerden ötürü Flash Player’ı desteklememesi, hem Adobe ile Apple arasındaki gerginliği daha da arttırdı hem de Apple ve Adobe kullanıcılarını da karşı karşıya getirdi. İnternet ortamında Flash ve Apple hayranları bu konu üzerinde oldukça tartışıyorlar.
Gelişmeler sonrası Apple web sitesinde HTML5 özelliklerini anlatan bir bölüm açarak artık standart olarak HTML5'te karar kıldıklarını resmen göstermiş oldu. Adobe ile gerginlik ve atışmalar devam ediyor ve henüz bu konuda iki taraftan uzlaşma adına atılmış bir somut adım yok.

http://www.apple.com/html5/

Apple Ne Diyor?
Flash ile ilgili Apple adına doğrudan Steve Jobs imzalı "Thoughts on Flash" başlıklı bir yazı Apple web sitesinde yayınlandı ve tartışma resmen başlamış oldu. Apple’a göre Adobe çalışanları tembel ve Flash’ın eksiklerini ve güvenlik açıklarını kapatmakla uğraşmıyor.

Ayrıca Flash’ın %100 ticari bir yazılım olduğunu, eski bir teknoloji ve kapalı bir sistem olduğunu bu yüzden Apple´ın Flash yerine HTML5, CSS gibi açık standartları benimsediğini söylüyor. Ek olarak Google gibi şirketlerinde bu standartları benimsediğini söyleyen Apple, HTML5 ile eklentiye gerek duymadan Flash ile yapılan animasyonların yapılabileceğini iddia ediyor.
Apple, Flash’ın güvenlik açıklarıyla dolu olduğunu ve Mac’lerdeki web tarayıcı çökmelerine sebep olduğunu, iPhone ve iPad üzerinde Flash gibi üçüncü parti teknolojileri istemediğini belirtiyor.
Flash'ın PC döneminde oluşturulmuş bir teknoloji olduğunu ve mobil platform döneminde pil ömrü ve açık web standartlarının önemli olduğunu belirtiyor.

Adobe Ne Diyor?
Apple'ın sitesinde "Thoughts on Flash" söylemine karşın Adobe'de web sitesinde "We Love Choice" adlı bir bölüm açarak iddialara yanıt verdi.

http://www.adobe.com/choice/

Kısaca Adobe bütün bu iddiaların gerçeği yansıtmadığını, Flash’ın çok kullanılan, gelişmiş bir platform olduğunu söylüyor. Ayrıca bir takım güvenlik açıklarının bulunduğunu kabul ederek bu açıklar üzerinde sürekli çalışıldığını belirtiyor.

Adobe ayrıca Flash’ı; Air, Flex ve Flash Catalyst ile daha da genişlemiş bir platform haline getirdi ve bu yönde çalışmalarına devam ediyor.  Girişte de bahsettiğimiz gibi internet üzerinde bu konuyla ilgili çok sayıda değerlendirme ile karşılaştırmalar mevcut ve her geçen gün yeni kıyaslamalar yapılıyor. Genelde yabancı sitelerde yer alan bu değerlendirmeler genelde taraflı oluyor.
Biz şimdi başlıklar halinde HTML5 ve Flash‘ın artılarından ve eksilerinden bahsedeceğiz.

 


Video
YouTube başta olmak üzere oldukça yaygın olan video sitelerinin yanında diğer bütün sitelerde videoları yayınlamak için video Player’lar kullanılır. Günümüze kadar bu videoların %95 ‘inden fazlası Flash Player kullanılarak yayınlanıyordu. Öyle ki Flash veya web tasarımı ile ilgili bilgisi olmayan ve sadece internet ortamında tüketici olan sınıf bile Youtube, Facebook vb. sitelerin Video Player’ları sayesinde Flash ve Flash Player’ın ismini duyup bilgisayarlarına Flash Player yüklemişlerdir daha doğrusu yüklemek zorunda kalmışlardır.

Ancak Flash’a rakip olarak gösterilen HTML5 bu geleneği biraz bile olsa bozacağa benziyor. En azından YouTube gibi video sitelerinin bir de HTML5 Player versiyonlarını desteklemesi kullanıcıları Flash Player yükleme zorunluluğundan kurtaracak ve yayıncıları Flash tekelinden kurtarmış olacaktır.

Hep birlikte HTML5 ve Flash Video Player arasında nasıl farklar var bakalım...

Desteklenen Video Formatları

Flash’ın desteklediği video formatları tarayıcıdan bağımsız olarak; flv, H.264, aac, mp3, vp6, speex ve gelecekte destekleyeceği vp8 formatı. HTML5’in desteklediği formatlar ise tarayıcıya bağımlı olarak şu şekilde;

Mozilla: Theora, ogg, vorbis, Mozilla 4.0 ile vp8 / IE 9.0: H264 / Chrome 5: H.264 - Theora - ogg - gelecekte vp8 / Opera 10 : ogg - theora - gelecekte vp8 / Konqueror : ogg - theora

Video Kalitesi

Video kalitesi olarak Flash ve HTML5 arasında fark yoktur. Aynı formatlarla yaptığımız testler sonucu Flash ve HTML5’de oynatılan videoların kalitesi aynı.

Yükleme Hızı
Yükleme hızı konusunda HTML5’in Flash’a oranla daha az gelişmiş olduğunu görüyoruz. Flash player ile oynatılan bir video daha hızlı yükleniyor ancak HTML5 bunu daha da geliştirecektir.

Donanımı Zorlaması

Donanımla ilgili aynı video ile yaptığımız testlerde ortaya çıkıyor ki HTML5 ve Flash Player ile oynatılan videolar sırasında CPU %15-25 arasında. Yani CPU kullanımı açısından Flash ve HTML5 arasında bir fark yoktur.

Siteye Ekleme Kolaylığı

HTML5 ‘in video özelliklerini incelediğimizde bu konuda kesinlikle Flash’tan daha iyi ve rahat olduğunu gördük. Flash’ta bir video’yu yayınlamak için neredeyse ekranı kaplayacak uzunlukta satırlarca kod (bu Flash tarafından otomatik olarak oluşturulur) yazıyorken HTML5’te sadece 2 satırla siteye video eklenebilmektedir.

Ekstra Özellikler

Flash Video Player’larda sıklıkla kullanılan tam ekran özelliği HTML5’te mevcut değil. HTML5’in artı yönü ise mobil cihazlarda sorunsuz çalışması. Flash ise eklenti olmadan mobil cihazlarda veya bilgisayarlarda sorun yaratıyor. HTML5'te bütün web tarayıcıların desteklememesi şu an için bir sorun yaratabiliyor. Ek olarak Flash Streaming konusunda çok güçlü fakat HTML5’te bu konuda sorunlar var ve Flash’a oranla zayıf kalıyor


Animasyon
Kuşkusuz bu konuyla ilgilenen çoğu kişinin en çok ilgilendiği konu animasyondur. Flash temelde bir animasyon programı ve tanınmasında bu özelliği büyük rol oynamıştır. Çoğu Flashsever animasyona olan ilgi sayesinde Flash programına merak salmıştır. Daha sonraları Flash sadece animasyon programı olmaktan çıksa da Flash’ı sadece animasyon oluşturmak için kullananların sayısı oldukça fazladır.

HTML5’de de animasyonlar oluşturulabilliniyor. Belki de çoğu kişinin ilgisini bu yüzden çekiyordur. Ancak fark şu ki Flash her türlü animasyon oluşturmak ve izletmek için kullanılıyor fakat HTML5 ‘te sadece web sayfalarında kullanılmak üzere animasyonlar oluşturulabiliniyor.
Flash ile banner animasyonları, çizgi filmler, introlar ve hareketli her şey oluşturulabilir. Oluşturulan animasyonlar web ortamında, masaüstlerinde, sunumlarda veya TV animasyonlarında hatta TV reklamlarında bile kullanılabilmektedir.

Ancak HTML5’te ise sadece web ortamında oynatılmak üzere bannerlar, çizgi filmler ve diğer animasyonlar hazırlanabiliyor. Ayrıca Flash’ta yapılan bir animasyonu video formatında çıktı alabiliyoruz, ancak HTML5’te böyle bir imkânımız bulunmamaktadır.

Animasyonlar oluşturulurken ve yayınlanırken dikkat edilmesi gereken önemli kriterlere gelelim.
Flash animasyonları için üçüncü parti programlar haricinde Adobe Flash Pro programı kullanılır. Flash Pro programının arayüzü animasyon oluşturmaya oldukça el verişlidir. Animasyonu kolayca oluşturabilmemiz için birçok kolaylaştırıcı Tool (araç)’lar mevcuttur.

HTML5’te ise herhangi bir animasyon aracı yoktur. Hazırlanan görseller kod yardımıyla sahneye ekleniyor ve animasyon tamamen kod ile hazırlanıyor.
Flash bu konuda HTML5 ‘e oranla daha kullanışlı. Kod ile animasyon hazırlamak isteyenler ActionScript ile tamamen kodlarla animasyon hazırlayabiliyorlar. Bunun dışında da yukarıda bahsettiğimiz gibi arayüz ve araçlar sayesinde kod kullanmadan da animasyonlar hazırlanabiliyor.

FPS Ayarı
Fps, saniyede ekranda görünen kare sayısıdır. Fps arttıkça, animasyonun kısalır. Fps ‘yi arttıp kare sayısı da arttırınca animasyon kalitesi daha da iyi oluyor.
Flash’ta da HTML5’te de Fps ayarı yapılabiliyor. Böylece animasyonların akışı ayarlanabiliyor.

Ancak, Flash’ta ActionScript 3.0 sayesinde bir animasyon devam ederken bu ayar anlık değiştirilebiliyor. Böylece animasyonun bazı yerlerini hızlandırıp bazı yerlerini yavaşlatabiliyoruz. HTML5’te ise böyle seçeneğimiz bulunmuyor. Animasyon tek belirlenen Fps ayarı ile başlayıp bitiyor.

Donanımı Zorlaması
Bu konuda aynı animasyon üzerinden yaptığımız testlerin sonuçları şu şekilde:


Sonuç olarak CPU aşağı yukarı her ikisinde de aynı, ancak Flash’ın hızı yüksek, HTML5’in düşük. Bu da HTML5’in hızına oranla daha fazla sistemi zorladığını gösteriyor.

Animasyon Kalitesi
Animasyon açısından baktığımızda Flash HTML5´in çok ilerisinde ama HTML5 yeni gelişen bir teknoloji ve bütün tarayıcılar desteklemiyor. Bu yüzden animasyonlarda istediğimiz performansı alamıyoruz. Animasyonlar yavaş olmasına rağmen CPU çok fazla tüketiyor tabii ki bu animasyona göre değişiyor. Flash ise bu konuda gerçekten çok başarılı çok hızlı, tarayıcıya bağlı değil ve 10.1 ile CPU sorunlarını da aşmış gibi duruyor fakat bu da animasyona ve geliştiriciye göre değişiyor.


Animasyon Teknikleri
Flash’ın arayüz araçları sayesinde objelere kolaylıkla 3D özelliği verilebiliyor. Ayrıca hazırlanan çizimlere ve objelere eklem özelliği verilebiliyor bu sayede kol bacak gibi bölgeler fizik kurallarına uygun bir şekilde çok kolayca animasyon elde edilebiliyor. Ayrıca yine paneller ve araçlar sayesinde Alpha (saydamlık), renk değişimi vb. özellikler kolayca obje üzerinde kullanılabiliyor. Ek olarak ActionScript ile de animasyonlar hazırlanabiliyor.
HTML5’te ise böyle araçlar mevcut değil ve animasyonlar tamamen kodlar yardımıyla hazırlanıyor.

Çizim Ortamı
Flash’ta yapılan animasyonların çizimleri Flash içinden de hazırlanabilindiği gibi istenildiğinde Photoshop, Illustrator gibi programlarda hazırlanıp Flash’a kolayca aktarılabiliyor.
HTML5’te ise animasyon görselleri sadece çizim programlarıyla hazırlanıp parçalar ayrı-ayrı kaydedilip HTML5 kodlarıyla görseller bir araya getirilip animasyon elde ediliyor.
Ayrıca Flash ve HTML5 vektörel çizim ve animasyonları destekliyor. 

 



Text Animasyonlar
Text (metin) Animasyonlar, çoğu animasyon severin görsel olarak işine yarayan bir özelliktir. Flash’ta bilindiği üzere bu özellik mevcut. Flash’ta animasyon yapmak isteyenler metni yazıp ActionScript ile bir takıp animasyonlar hazırlayabilir ya da metni çizime dönüştürüp kodlardan bağımsız olarak istediği her türlü animasyonu yapabilir. Yazıyı çizime dönüştürmek oldukça kolay bir işlemdir. Bu sayede yazı animasyonları yapmak isteyenler yazıları tek tek çizmek ve kare-kare animasyonunu hazırlamaktan kurtulmuş olmaktadır.

HTML5’te de Text Animasyonlar ve Effectler mevcuttur. Ancak Flash’a oranla çok yetersiz kalmaktadır. HTML5’te yazılan metinler kodlarla anime ediliyor ve bu istenilen sonucu vermiyor. Çoğu yazı animasyonu bu yüzden sistemi gereğinden fazla zorluyor. Metni çizime dönüştürme özelliği ise HTML5’te mevcut değil. Zaten HTML5’te yapılan bütün animasyonların görselleri Photoshop gibi programlarda hazırlanıp, parçalanıp kodlarla ayrı ayrı hareketlendirilmektedir.

Bu yönleriyle incelediğimizde Text Animasyonlar konusunda Flash, HTML5’in ilerisinde görünüyor.  Önümüzdeki sayı "HTML5 ve Flash" incelememize devam edeceğimiz için şimdilik burada noktalıyoruz. Gelecek sayıda 3D, Multitouch, Arayüz, Kod Yazma, Gizlilik, Uyumluluk ve Güvenlik konularında Flash ve HTML5’i kıyaslamaya devam edeceğiz...

 

July 2010

 


Mercek Altında