HTML5 ‘in Getirdikleri, Getirecekleri

Devrimci HTML5, bugün bize ne getirdi ve bundan sonra ne getirecek buyurun bakalım. 🙂

Kim bu HTML yahu?

Web sitelerin görsel tasarımında kullanılan yada veri, içerik tanımlamak için kullanılan statik ve betik işaretleme dilidir.

Özetle web tasarımının temeli ve Front-end Developer‘ın en güçlü dilleri arasındadır.

1980 senesinden bu yana geliştirilerek, sitelerin kullanıcılarına ve SEO(Search Engine Optimization)‘ya daha faydalı hale gelmeye çalışıyor.

Günümüzde HTML dilinde önemli değişiklikler ve yenilikler meydana geldi. Bu çalışmaların en son sürümü ise HTML5 ile karşımıza çıkıyor.

HTML’in babası Tim Berners Lee?

İnternetteki gezintiniz dünyayı etkiliyor. – Tim Berners Lee

1989’da CERN laboratuvarlarında HTML işaretleme dilini geliştirerek Dünya Çapında Ağ (WWW) olarak da tanımlanan bilgi paylaşım sistemini kurmuş olan bilgisayar profesörüdür (Wikipedia).

Tüm web tarayıcılarındaki standartı belirleyen uluslararası bir organizasyon W3C(World Wide Web Consortium) kurucusudur.

Kısacası web’in “Godfather” dır. 😉 Kendisi hakkında daha fazla bilgi için w3.org/People/Berners-Lee ziyaret edebilirsiniz.

Devrimci HTML5?

HTML5, birçok yeni özellikleri, var olan özellik iyileştirmeleri ve betik tabanlı API’ler ile HTML biçimlendirme dilinin en son jenerasyonudur.

HTML5 geliştiricilere daha fazla esneklik ve birlikte çalışabilirlik kazandırmak ve etkileşimli web siteleri ve uygulamaları geliştirmelerini mümkün kılmak için form kontrolleri, yeni API’ler,multimedya nesneleri ve semantik etiketler gibi birçok yeni özelliğe sahiptir (Goldstein,Lazaris, & Weyl, 2011).

WC3‘ün önerdiği yeni standart değil bu standartlardan daha fazlası olarak öne çıkmaktadır.

Birlikten kuvvet doğar. – Türk Atasözü

Kısmen daha az kod yazma olanağı veren HTML5 asıl gücünü web programlama dillerinden(PHP vs.), Javascript ve CSS‘ten almaktadır.

Neden HTML5? Neden?

HTML5’in birçok yeni özelliği web tabanlı uygulamalar için daha iyi platform geliştirme amacı etrafında toplanmaktadır. Açıklayıcı etiketler(tags), cross-site ve cross-window iletişiminden animasyonlar ve multimedya destekleri geliştirmeye kadar, HTML5 ile uygulama geliştirenler kullanıcı deneyimlerini iyileştirmek için birçok yeni araca sahiptir (Hogan, 2011).

HTML5, her platformda çalışması, eski tarayıcıları ile uyumlu ve zarif bir şekilde hata yönetimini sağlamak için bazı temel ilkeler göre tasarlanmıştır.(World Wide Web Consortium).

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 bozmaktaydı. Bu yüzden HTML5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır.

HTML5 kullanarak web uygulamaları çok daha hızlı, güvenli, ve her platform için uygun bir şekilde çalışması hedeflenmiştir.

Giderek hayatımızın her alanına giren internet sitelerinin kullanıcılarına görsel açıdan daha mükemmel tasarımları sunma zorunluluğu, HTML5 dili sayesinde mümkün olmaya başladı.

Getirdikleri nimetler

HTML5′i devrimci olarak adlandırmıştık, önemli değişiklikler ve yenilikler meydana geldiğini söylemiştik. HTML5 web dünyasına nasıl bir devrim katmış inceleyelim.

Sürükle bırak

Sürekle ve bırak yaygın kullanılan bir özelliktir. Bir nesneye yakalayıp başka bir konuma yerleştirme işlemidir. HTML’in eski sürümlerinde dışarıdan yüklememiz gereken API’ler yardımıyla gerçekleşiyordu. HTML5‘in bize sunduğu yenilikler den biri ise bu yöntemi içinde barındırıyor olmasıdır.

Web soket

Sunucuya kalıcı bağlantı sağlamaya olanak veren Web Socketlerini sunuyor. Sürekli olarak yeni bir bildirimi gelişmeyi kontrol etmek yerine, siteniz bir sockete bağlanır ve herhangi bir bildirim olduğunda bunu kullanıcıya iletir.

Web Sayfalarının ve uygulamaların daha hızlı çalışması amacıyla Ajax’la birlikte sayfanın belli bir kısmını güncelleme özelliği çoğu web sayfasında kullanılmaktadır. HTML5 ile birlikte gelen Web Soket Ajax’la gelen bu özelliği biraz daha öteye götürerek ve iletişim iki taraflı sağlanmaktadır (Hogan, 2011).

Canvas

HTML5 ile birlikte yeni gelen etiketlerden biride web sayfası üzerinde 2 yada 3 boyutlu çizim yapılmasına olanak kılan ve herhangi bir plug-in(eklenti) ihtiyacı olmadan kullanabilinen <canvas> elementidir.

Çizim bölümü Javascript ile kontrol edilmektedir. Geniş bir kullanım alanına sahip olan canvas elementi özellikle oyunlar, sunumlar gibi bir çok alanda kullanılabilinir.

Yeni ve daha tanımlayıcı biçimlendirme elementleri

<canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>

Desteği çekilen HTML elementleri

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

Ses ve video

HTML’in önceki sürümlerinde medya içeriklerini kendi içerisinde bulunduruyordu ve bu yüzden web uygulamaları Flash, ActiveX, Quicktime gibi plug-in’lerin kullanımına ihtiyaç duyuluyordu.

HTML5 kullanımıyla artık video, ses ve vektör grafikleri için artık Flash, Silverlight gibi programlara ihtiyaç duyulmuyor. Sadece bir web tarayıcınızın olması yeterlidir.

Web depolama

HTML5 gelmeden önce veri depolamak için çerezler kullanılıyordu. HTML5‘in geliştirilmesiyle birlikte veri depolamak için Web Depolama yöntemi ortaya çıktı. Fakat çerezlerden en önemli farklarından biri; Yerel depolama(local storage) ve geçici depolama(session storage) verileri kullanıcı bilgisayarında depolanır ve gerektiğinde buradan çağrılır. Böylelikle websitelerine erişimde hız ve performans bakımından artış sağlanır.

Web worker

Web Worker geliştiricilere geçmişte yapılanlara göre daha hızlı cevap veren uygulamalar tasarlanmasını sağlar. Web İşçisi temelde arka planda işlemcide işlenmek üzere Javascript iş parçacıkları oluşturmamıza olanak tanıyan bir API‘dir.

Çevrimdışı web uygulamaları

Web’in doğası gereği, çevrimiçi (online) olmak web uygulamalarının çalışabilmesi için oksijen tüpüdür. HTML5 geldi oksijen tüpü ortadan kalktı. Taşınabilir cihazların(Tablet, Akıllı telefon vs.) çevrimdışı(offline) olduğu zamanlarda da kısmen de olsa işlevsel olması artık kullanıcılar tarafından bekleniyordu ve HTML5 beklentileri karşıladı.

Google Mail web uygulaması HTML5 teknolojileriyle geliştirilirmiş ve çevrimdışı da çalışabilen uygulamadır. Çevrimdışı(offline) olduğumuzda daha önce gelen mailimize bakmamız açısından önemli bir devrimdir.

<input> elementinin devrimi

HTML5 den önceki sürümlerde, <input> elementinin özelliklerinin kısıtlı olması kullanıcıdan veri alışverişini zorlaştırıyordu. Örneğin; kullanıcıdan email girdisi(input) istediği zaman web programlama dillerinin fonksiyonlarıyla sağlanıyordu. Şimdi ise tek bir özellikle bu sağlanıyor. HTML5 ile beraber input elementine birden çok özellik dahil oldu. Böylelikle daha temiz veri alışverişi sağlanıyor.

tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color

Getirecekleri

HTML5’deki nimetler ile çok daha iyi bir UX(Kullanıcı deneyimi) sağlanacaktır.

W3C, uzun bir süredir çok yönlü geliştirilmiş bir web sağlamak gayesiyle yeni standartlar hazırlamak için çalışıyor. Animasyonlar, çoklu-ortamlar, siteler arası iletişim, sunucularla iletişim gibi bir çok devrim niteliğinde geliştirmeler yapılıyor.

Beraberinde getirdiği yeni etiketler ile içeriğe, görselliğe, SEO(Search Engine Optimization)’ya büyük kolaylıklar sağlamaya devam edecektir.

Test et

Hangi kodların, tarayıcılarda desteklenme durumu hakkında bilgi veren ve tarayıcınızın HTML5 desteğini ölçmek için bazı web servisler önerisinde bulunabilirim.

Web tarayıcınızın HTML5 teknolojisine ne kadar destek sağladığını buradan öğrenebilirsiniz.
html5test.com

HTML5 teknolojisinin yeni gelen özelliklerini hangi tarayıcıların destekleğini de bu iki web servisinden bakabiliriz.
caniuse.com
html5readiness.com

İşin mutfağının kaynakları

İşi mutfağından öğrenmek için temeli iyi atmamız gerektiğini düşüyorum. HTML5 yeniliklerini öz kaynağından takip edebilir ve sağlam bir şekilde öğrenebilirsiniz.
dev.w3.org/html5/spec/Overview.html

diveintohtml5.info‘nun da incelenmesinde fayda var.

learn.shayhowe.com/html-css da HTML ve CSS web tasarım temellerini kullanarak bir web site ortaya çıkartılıyor. Adım adım uygulanarak gidilmesi özellikle HTML5 bilgilerinizi daha da sağlamlaştıracaktır.

Web teknolojileri çok hızlı gelişiyor ve ayak uydurmamız gerekli. HTML5 teknolojisi, HTML sürümlerinin devrimci niteliğinde web dünyasında aldı başını gidiyor. Siteleri, web tasarımının modası HTML5’e göre kodlamaya başlayabilirsiniz. Çay koydum mutfakta kalın. Afiyet olsun. 🙂

Kaynaklar