HTML 5 ve CSS3 nedir ?

Web programlama dillerinin temel taşı HTML bugüne kadar ki versiyonlarında biraz zayıf, çok fazla işlevi olmayan bir kodlama dili olarak karşımızdaydı. Bu durum beraberinde CSS, JavaScript gibi tamamlayıcı programlama dillerinin doğmasınada sebep oldu. Namı değer World Wide Web (w3.org) Html ‘yi yepyeni özelliklere kavuşturmak için HTML 5 üzerinde çalıştıklarını duyurmuşlardı. Bir süredir konuşulan HTML 5 Firefox 3.5 ile birlikte kısmende olsa kullanılmaya başladı.

HTML ve CSS nedir?
İnternet henüz yeniyken web siteleri neredeyse sadece HTML ile geliştiriliyordu. Ancak bir siteyi sadece HTML ile biçimlendirmek zorlu bir çalışma ve yapabilecekleriniz de sınırlı. İşte bu noktada CSS devreye giriyor.
Açılımı Cascading Style Sheets (Stil Sayfaları) olan CSS, web tarayıcısına HTML sayfasının nasıl gözükmesi gerektiğini anlatan dosyadır. HTML web sitesinin iskeletidir. CSS ise sayfadaki belli elemanların nasıl gözükeceğini belirtir: Yazı fontları, font renkleri, arka plan stilleri vb.
CSS web sitesi tasarlamayı kolaylaştırır. CSS öncesinde başlık, içerik, vb.nin nasıl gözükeceği ayrı ayrı HTML ile belirtiliyordu. CSS tek bir dokümanda değişiklik yapıp bu değişikliği tüm siteye uygulamaya olanak vererek tasarımcılara büyük esneklik ve kolaylık sağladı.

Sonraki adım: HTML ve CSS 3
HTML 5 ve CSS 3, biçimlendirme dillerinin ulaştığı son noktadır. Şu an için HTML 5′in web sayfalarına video eklemeyi kolaylaştırması en dikkat çeken özelliği. Tabii HTML 5′in video ekleme dışında kullanıcılar ve geliştiriciler için pek çok gelişmiş özelliği bulunuyor.

Flash’sız Video ve Animasyon
HTML 5, internette Flash ya da Silverlight gibi eklentilere ihtiyaç duymadan video izleyebilmemizi sağlayacak. Peki bu konu neden bu kadar önemli? İlk olarak HTML 5 bedava ve Adobe Flash eklentisine ihtiyaç duymuyor. İkinci olarak sistem kaynaklarından kullandığı için bilgisayarınızı yavaşlatabilir (Gerçi şu an beta aşamasındaki Flash 10.1′in donanımdan faydalanması bu hız problemini değiştirebilir.). HTML 5′in video özelliği ise doğrudan tarayıcı içinde bulunuyor.

HTML5 video ile ilgili önemli bir nokta da giderek yayılması. Örneğin Safari, Chrome ve yeni çıkacak olan Internet Explorer 9, H.264 video formatını kullanan gömülü (embed) HTML 5 video desteğine sahip olacak.Diğer yandan Firefox şu an için Ogg Vorbis formatını kullanan HTML5 video desteği veriyor ama Firefox’un geliştiricileri H.264′ün açık kaynak kodlu olmaması nedeniyle gelecekte lisans sorunu yaşanabileceğini düşünüyorlar.
HTML5 ve CSS3 web tasarımcılarının animasyonlar ve interaktif uygulamalar (oyunlar gibi) geliştirmelerini de kolaylaştırıyor. Tabii şu an için bu alanda Flash’ın yerini alması mümkün değil ama HTML 5 ve CSS 3 büyük bir potansiyele sahip.

Çevrimdışı Depolama: Web uygulamaları sahneye çıkıyor
Web uygulamaları giderek komplike bir hâle geliyor ve HTML5′in yeni özellikleri daha da gelişmelerini sağlayacak. HTML5 ile web uygulamaları bilgi saklayabilecekler böylece internet araçları çevrimdışı olarak kullanılabilecek. Bu sayede kullanışlı web uygulamaları aracılığıyla e-posta, takvim vb. gibi bilgilerinize ulaşıp, bu bilgileri depolayabileceksiniz.
Online olduğunuzda bu uygulamalar daha hızlı yüklenecekler çünkü sayfanın yapısı tarayıcıda zaten kaydedilmiş olacak. Teorik olarak çevrimdışı iken web uygulamasında yaptığınız tüm değişiklikler online olduğunuzda da geçerli olacak. Örneğin Google Aralık ayında Web uygulamalarına HTML5′ten yararlanacağını açıkladı.

Çevrimdışı depolama sayesinde her sayfayı tek tek kaydetmeden hangi siteleri ya da site tiplerini önbelleğe almak istediğinizi belirleyebileceksiniz. Şu an bir sayfayı çevrimdışı olarak kaydetmek istediğinizde Dosya- Farklı Kaydet seçeneğini kullanmanız gerekiyor. Yeni sistem ile tarayıcının sizin belirlediğiniz tipte siteleri otomatik olarak kaydetmesini ayarlayabileceksiniz. Ayrıca bu yöntem ile yükleme sürelerini de artırmak mümkün olacak çünkü sayfanın bir bölümü zaten hafızada olacak.

Yeni Tasarım Araçları
HTML5 ve CSS3 ile web uygulamaları ve siteleri daha şık ve çekici olabilecek. HTML5′in yeni eklenen daha çok renk ve gradient, gölgelendirme, yuvarlak köşeler yapabilme ve tabii ki çevrim dışı depolama tasarımcıların çok daha kolay bir şekilde şık web siteleri oluşturmalarına olanak sağlayacak.

HTML5 Uyumluluğu
HTML5 ve CSS 3 henüz tamamlanmadı ama şimdiden web dünyasına etki etmeye başladılar bile. Örneğin Safari’nin ve Chrome’da HTML5 ve CSS3′ün geliştirme aşamasındaki sürümlerinden özellikler bulunuyor. Bu tarayıcıları kullanarak HTML5 kullanan CNN,The New York Times, YouTube (beta), ve Vimeo sitelerini inceleyebilirsiniz. Internet Explorer 8′in HTML5 desteği oldukça sınırlı ama Internet Explorer 9, h.264 video ve ses desteğine sahip olacak.

Yeni versiyonda <header>  <footer> <nav> <canvas> <video> <audio> <progress> gibi harika yeni özellikler gelirken. Uzun zamandır yerini CSS ‘ye bırakmış olan <center>, <font> gibi özellikler kaldırılmış.

Yeni Kodların Bazılarını inceliyelim :

  • canvas : Bence Html 5 ‘in en muhteşem özelliği. sayfada bir alan oluşturur ve bu alana JavaScript yardımıyla bir programı html dosyanızın içine alabiliyorsunuz.

Örnek : canvaspaint.org (paint uygulaması)
Örnek : İnanılmaz bir 3D tetris oyunu

  • video : Bu tag ile video dosyalarınızı çağırıp zahmetsizce videolarınızı ziyaretcilerine izletebilirsiniz.
    örnek için buraya tıklaynız.
  • audio : Müzik dosyalarınızı yayınlamak için player oluşturur.
  • header : Üst alan oluşturur. (Css ile uzun saatler alan ayarlamalardan kurtarır)
  • footer : Alt alan oluşturur.
  • nav : Menü gibi kolonlar oluşturur.
  • geolocation : Ziyaretcinizin harita üzerindeki konumunu belirlemek için.
    örnekler için buraya ve buraya bakabilirsiniz.
  • postMessages : Tarayıcıya mesaj göndermenizi sağlar.
    örnek için buraya tıklayınız.
  • drag&drop : Sürükle bırak özelliği.
    örnek için buraya ve buraya tıklayınız.
  • drag Anything : Sayfa içindeki elemetleri sürükleyip başka bir elementin içerisine koyabiliyoruz.
    örnek için buraya tıklayınız.

Şimdi sıra kötü haberde ; malesef internet explorer Html 5 ‘i şimdilik desteklemiyor, Microsoft  ‘un bu tutumu sayesinde neredeyse bütün web proramcıları İnternet Explorer ve Microsoft ‘tan nefret ettirdi. Html ‘i kullanmak için iki seçenek var ya Sadece Firefox, Opera, Safari, Chrome tarayıcısına sahip internet kullanıcılarını hedefleyip internet Explorer ‘i görardı edeceğiz yada Microsof ‘tu bekleyip belki Internt Explorer 9 versiyonunda Html 5 desteği verir deyip umut edeceğiz. Kısacası bekleyeceğiz.

Sevebilirsin...

2 Yanıt

  1. nursel diyor ki:

    çok güzel çok açık keşke biraz örnek olsaydı mesela bir web sitesinin bu özellikleriyle aşamalarını verseydiniz…

  2. anıl diyor ki:

    çok güzel bilgilendirici bir yazı olmuş. herkesin anlayabileceği netlikte. teşekkürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir