Ana sayfa Yazılım Adobe Flash zor durumda : Internet’te HTML 5 devrimi

Adobe Flash zor durumda : Internet’te HTML 5 devrimi

0
Internet üzerinde kullanılan teknolojileri belirleyen ve standart haline getiren W3 Konsorsyum (w3.org) günümüzde kullandığımız HTML 4.1 versiyonunun 5.ci versiyonu için geliştirmelere devam ederken HTML 5.0 Demoları günden güne artıyor.
W3 , HTML 5.0 versiyonunun en iyi ihtimalle 2017 yılında tamamlanabileceğini duyurdu. Ama bu demek değilki 2017″den once kullanılamıyacak. HTML 5.0 demoları o kadar başarılı sonuçlar verdiki bu süreç geçiş süreci olacak gibi duruyor.

İnternette video ve ses uygulamaları artan bant genişliğiyle beraber iyice ön plana çıktı. HTML 4.1″in video ve ses desteği olmaması bu taraftaki talepleri doğrudan Adobe Flash”a yöneltmişti. Güncel tarayıcıların %95 “e yakınında bulunan Flash bu konuda tek seçim olmayı birkaç (Microsoft Silverlight) gibi başarısız alternatif olmasına ragmen sürdürmekte. Sitenizde bir tanıtım videosu veya bir müzik listesini çalacak player düşündüğümüzde aklımıza ilk gelen Flash ve programlama altyapısı olan Actionscript gelmekte. HTML”in orada bulunmaması büyük bir eksiklikti.

 

 

 

Bu eksiklik Flash sayesinde uzunca bir zaman hissedilmese de Youtube, Vimeo,Twitter,Facebook gibi yeni nesil birçok websitesi sitelerindeki görsel uygulamalar için Flash”ı tercih ederek günümüzdeki popülerliklerine ulaştılar.  
HTML 5 yepyeni bazi elementleri de beraberinde getiriyor. Artik div”ler yerine belli basil adları olan tagler kullanılacak. örnek olacak verecek olursak şuanda bir sayfayı divlerle tasarlamak istediğimizde Class isimlerinin id”lerini HTML 5 için anlamlı olacak şekilde verek istersek alttaki gibi bir adlandırma yapmamız gerekirdi.

Bu arayüzü HTML 5.0 standartına uygun şekilde yapmak isteseydik aşağıdaki gibi bir adlandırma yeterli olacaktı.

 

 

İsterseniz HTMl 5.0 ile gelecek olan yeni tag”lere tek tek göz atalım :
<header>
Header sayfamız hakkında genel bilgilerin olacağı kısımdır. Sadece sayfa değil table”larında headerları olacak ve bu SEO için data tablolarını kullanmamızı kolaylaştıracaktır.
<nav>
Nav elementimizde sayfamızdaki navigasyon elemanlarını ekleyebileceğimiz kısım olarak geçiyor. Sayfa içindeki linklerle de etkileşiminde frame mantığı gibi nav division”ı sabit tutulabilecektir.
<section>
Aslında div tagi yerine hangisi geldi diye sorulan sorulara direk aynı şekilde bire bir olmasada section adını verebiliriz.section tagi sayfa tasarımlarımızı bölümlere bölmeye yarıyor.
<article>
Günümüz internet trendlerinde önemli yer tutan blog yapısındaki bir yazı için yazının içeriğini gösteren kısımdır.
<aside>
Yine blog tipli sitelerde sağ kısımda yer alan reklamlar,bulut yapısı,RSS bildirileri gibi kısımlar içinde aside tagleri kullanılacak.
<footer> Sayfanın en altında da sayfanın linklerini ve kısaca sonlandığını bildiren bir tasarımın olduğu kısıma da footer tagi kullanılabilecek ve sadece sayfada bir kere değil çoklu sayıda kullanılabilecek.

 

 


 
aside:  İçerik ile ilişkili ayrıntılar, notlar vb alanlar için içeriğin yanına iliştirilmiş alanları tanımlamak için kullanabiliriz.
figure:  Genelde kullandığımız şekil ve açıklaması için eklenmiş bir element. Hem şekil hemde açıklamasını içeren bir element olacak. dialog:  Bu element ismindende anlaşıldığı gibi diyalog, karşıklık sohbet içeren sayfaları daha kolay kodlamamız için eklenmiştir. Bu element <dd> ve <dt> elementlerini alt element olarak kullanır.

time: 
Metin içindeki zaman bilgilerini normal içerikten ayırmamıza yarayan bir element. Bilgiye kolay erişimimizi sağlayan bir element.
meter:  Meter elementi özel oranları tanımlayan sayısal değerleri için kullanılır. Altı adet özniteliği vardır: value, min, low, high, max, optimum.
progress:  İlerleyen prosesin durmunu göstermek için tanımlanır. Yüklenen resimler için kullanılablir %45 yüklendi yazısını göstermek için mesela. İki adet özniteliği vardır: value ve max. Javascript yardımı ile kolaylıkla yükleme işlemlerimizi yapabilmemizi sağlayacak güzel bir element.

HTML 5.0 geliştirilmeye devam eden bir standart olduğu için şuanki duyurulan ve sabitlenen taglerle HTML 5.0 validation alabilen bir arayüz geliştirseydik aşağıdaki gibi bir hal alabilirdi.
 

 

 

HTML 5.0 ile gelen en önemli özelliklerden biri de ziyaretçinin Geolocation adı verilen ziyaretçilerin Jeopolitik konumunu almamızı sağlayacak yeni bir gelişim olacak. Bu sayede en yakındaki bir café,hotel veya adresi bulmamız kolaylaşacak.
HTMl 5.0 ile beraber gelecek ve en çok üzerine tartışılan yenilik ise audio ve video tagidir. HTML 4 “ün ses ve video uygulamalarındaki eksikliklerini Flash”ın doldurduğunu bahsetmiştim ancak HTML 5.0 ile Youtube ve Vimeo gibi sitelerin demolarını da başarılı bir şekilde yayınladığı üzere sayfalarımıza sadece flv olmak zorundada olmamakla avi,divx,mp4,wmv videolarını şu şekilde ekleyebileceğiz.
<video width=”400″ height=”360″ src=”video.mp4″> </video>
Videonun kontrollerini de istediğimiz şekilde tasarladığımız butonlara Javascript ile erişip isteiğimiz komutu ekleyebileceğiz. Aynı şekilde ses dosyalarını da istediğimiz şekilde ekleyebileceğiz.

<audio src=”arkaplan.mp3″ controls=”controls”> </audio>
Video veya ses dosyamıza klasik 3 adet oynatan duraklatan ve durduran butonlar tasarlamak istesek ekteki gibi Javascript yardımıyla basitçe bu işi yapabileceğiz.

<script> var video = document.getElementById(“video”); </script> <p><button type=”button”onclick=”video.play();”>Oynat </button> <button type=”button” onclick=”video.pause();”>Duraklat</button> <button type=”button” onclick=”video.currentTime = 0;”>Durdur</button>

Bu video ve ses uygulamalarının  özellikle Adobe Flash”ın yerini ne kadar alacağı ise tam bir soru işareti? Bazıları Flash”a artık ihtiyaç kalmadığını Silverlight”ın değil ama HTML 5.0″ın kesinlikle bir Flash Killer (Flash öldürücüsü ) olduğunu söylerken bazı kesimlerde sabit video gösterimleri için Flash kullanımında azalma olduğunu Kabul ederken ancak multimedia öğeler içeren animasyonlu siteler için Flash”ın halen tek tercih olmaya devam edeceğini belirtiyorlar. Bende bu son grubun içerisindeyim.

 

 

Geçtiğimiz günlerde Tasarım camiasının saygın ve değerli ismi Apple CEO”su Steve Jobs yeni ürünleri IPad”ı tanıtır ken IPad”ın da aynı IPhone gibi Flash Playerlı olan siteleri gösteremeyip yerine Mavi bir küp göstermekte. Steve Jobs bu konuda Adobe”yi tembel olmakla suçlayarak Video oynatmakta takılan ve atlamalar yapan dahası birçok güvenlik açığını da beraberinde getiren bu plugin yerine Apple”ın HTML 5.0″a destek verip beklediğini bir demoyla başarılı bir şekilde videoyu da IPad”ta oynatması üzerine sanal alemde bir kıyamet koptu gidiyor. Jobs bir soru üzerine de Apple ürünlerinin hiçbirinde Flash Player “ın asla olmayacağını da belirtti. Adobe bunun üzerine Flash CS5 ile .IPA uzantılı dosyaları çıkartılabileceği ve IPhone için bir uygulama geliştirmeyi oldukça kolaylamış oluyor ancak web üzerinde video oynatıcı olarak HTML 5.0″ın özellikle mobil kısımdaki video verimliliği ve desteğiyle yeni bir soluk getireceği kesin.

Video için fullscreen özelliğinin olmaması ama zaman içerisinde geleceği bazı örneklerle gösteriliyor.Ayrıca yazılım camiasını da heyecanlandıran <datagrid> tagiyle SQL tümlecikleriyle very çekip html”e yazabilmemiz de gayet güzel bir avantaj. HTML 5.0 Demolarını destekleyen bir tarayıcınız varsa (Firefox 3.0 ve Safari 3.1 destekliyor , IE 8.0 bazı tagleri destekliyor) HTML 5.0 demolarını görebilirsiniz.


Demolar :

http://www.youtube.com/html5
http://html5demos.com/
http://vimeo.com/blog:268
http://www.quackit.com/html_5/tags/html_datagrid_tag.cfm
 

 

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here