HTML5

by 3 contributors:

This article is in need of an editorial review.

This translation is incomplete. Please help translate this article from English.

HTML5 demolar

En son HTML teknolojisini gerçek uygulamasıyla gösteren bir
Demo Arşivi

HTML5_Logo_128.png

HTML5 , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:

  • Yeni elemanları, özellikleri ve davranışları içeren bir HTML sürümünü,
  • Çok güçlü ve farklı  Web siteleri ve uygulamalarını kapsayan çok büyük bir teknoloji kümesini ki HTML5 olarak kısaltılmış olup HTML5 ve elemanları diye bilinir.

Tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olup; bu referans sayfası, fonksiyonlarına göre çeşitli sınıflara ayrılmış HTML5 teknolojileri hakkında bağlantıları barındırır, bunlar:

  • Semantics (Kurgulama Durumu): İçeriğinizi daha iyi tanımlamanıza,
  • Connectivity (Bağlantı Durumu): Sunucuya yeni ve yenilikçi yollarla bağlanmanıza,
  • Offline & Storage (Çevrimdışılık ve Depolama Durumu):  Web sayfalarının yerel sunucuda veri depolamasına ve çevrimdişı daha verimli kullanılmasına,
  • Multimedia (Çoklumedya): Open Web ile 1. sınıf programcılar, video ve ses üretmesine, 
  • 2D/3D Graphics & Effects (2 ve 3 Boyutlu Grafik ve Efekler): 
    Daha fazla ve çeşitli boyuttaki sunum seçeneklerine,  
  • Performance & Integration (Performans ve Entegre Etme): Bilgisayar donanımının daha iyi kullanılmasına ve daha büyük hızlara çıkılabilmesine, 
  • Device access (Sürücülere Ulaşma): Çeşitli giriş ve çıkış sürücülerinin kullanılmasına, 
  • Styling (Şekillendirme): Web tasarımcılarının, daha görkemli temelara hükmetmesine imkan tanır.
     

semantik (Kurgulama)

HTML5 Bölüm ve Anahatlar
HTML5 bölüm ve anahatlarını belirleyen <section>, <article>, <nav>, <header>, <footer>, <aside> ve <hgroup> adlı yeni HTML5 elemanlarına bakış.
HTML5 Video ve Ses Elemanlarının Kullanılması 
<audio> ve <video> elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.
HTML5 Formlar
API doğrulamayla kısıtlanmış yeni özellikler,  <input> kullanım tipi (English: type) için yeni değerler ve yeni bir <output> elemanı için  HTML5' de web formlarındaki iyileştirmelere bir bakış.
Yeni Kurgu (Semantic) Elemanları
Bölümlerin, medya ve form elemanlarının yanında <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> veya <meter><main> gibi geçerli HTML5 elemanları  içerisine dahil edilen yeni birçok eleman vardır.
<iframe> İyileştirmesi
Şimdi sandbox, seamless ve srcdoc  komutlarının kullanılmasıyla artık programcılar güvenlik düzeyi ve bir <iframe> elementi için umulan iyi renderi oluşturma konusunda emin olabilirler. 
 MathML 
Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.
HTML5' e Giriş
Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.
HTML5 -Compliant Parser (HTML5 - Uyumlu Ayrıştırıcılar) 
Bir HTML dökümanının DOM (İngilizce: Document Object Model yani Dökümanın Nesnesel Modeli) baytlarını döndüren ayrıştırıcı, şimdi geçersiz HTML ile karşı karşıya kalındığı taktirde bile genişletilmiş ve tam olarak her durumdaki davranışı tanımlayabilmektedir.

CONNECTİVİTY (BAğlanılabilirlik)

Web Soketleri
Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.
Sunucu - Gönderim Olayları
Sunucunun yanlızca istemcinin beklentilerine yanıt olarak gönderebileceği klasikleşmiş verilerden ziyade, sunucuya istemci için olayları daha da öteleme imkanı tanır.
WebRTC (Real-Time Communication) 
Bu teknoloji, bir eklenti ve bir harici uygulamaya gerek duymaksızın, diğer kişilerle iletişime ve direkt tarayıcı içinde video konferans kontrolüne imkan tanıyan, gerçek zamanlı iletişim diğer adıyla
RTC (Real-Time Communication) olarak hizmet verir.

OFFLİNE & STORAGE (çevrimdışılık ve depolama)

Çevrim Dışı Kaynaklar: Uygulama Önbelleği
Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.
Çevrimiçi ve Çevrimdışı Olaylar
Firefox 3, bağlantının bittiğinin yahut devam ettiğinin tespiti kadar etkili bir şekilde uygulama ve eklentilere, aktif internet bağlantısının olup olmadığını tespit edebilecekleri çevrimiçi ve çevrimdışı WHATWG yani Web Hypertext Aplication Tecnology Working Group
( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.
WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)
İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.
IndexedDB (İndexlenmiş Veri Tabanı)
Tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veri indeksini kullanarak yüksek performanslı erişimin sağlanabileceği bir weeb standardıdır.
Web Uygulamalarında Dosyaların Kullanılması
Dosya API desteğinin yeni HTML5 için gecko'ya eklenmesi web uygulamalrı için kullanıcının seçtiği yerel dosyalara ulaşmasının mümkün kılmıştır. Bu içerik HTML elemanlarının çoklu ve yeni özelliklerle <input>  şeklinin (type) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader
(Dosya okuyucu) olarak bilinir. 

 

MULTIMEDIA (çoklu ortam)

HTML5 Ses ve Videonun Kullanılması
HTML5 için <audio> ve <video> elemanları gömülebilir ve yeni multimedya içeriğinin üzerinde manipülasyon yapılabilmesine izin verir.
WebRTC
RTC (Real Time Communication) "Gerçek zamanlı iletişim" olarak sunulan bu teknoloji, eklenti ve harici uygulamaya gerek duymaksızın diğer kişilerle direkt olarak iletişime ve tarayıcı içinde video konferansın kontrol edilmesine imkan verir.
Kamera API Kullanımı 
API Nedir: İngilizce Aplication Programming Interface  kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.

Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.
Traklar ve WebVTT
WebVTT demek Web Video Text Tracks yani  Webdeki videoların yazı formudur. <track> elemanı videolarda altyazı ve bölümlere izin verir. WebVTT bir yazı formatıdır.

 

3d (ÜÇ BOYUTLU) grafikler ve efektler

Canvas Elemanının Kullanımına Örnekler
Firefox' da yeni <canvas> elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.
<canvas> elemanı için HTML5 Yazı API' leri 
Artık HTML5 yazı API' lerini <canvas> elemanı tarafından desteklenmektedir.
WebGL (Web Graphic Library)
WebGL, Web Grafik Kütüphanesi anlamındadır. WebGL, web platformuna, HTML5 <canvas>  elemanları içinde kullanılabilecek OpenGL ES 2.0 ile yakından uyumlu bir API sunarak, Üç boyutlu grafik kullanım imkanı sunmuştur.
SVG (Scalable Vector Graphics)
Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.

performans ve entegrasyon

Webte Çalışanlar
İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.
2.Seviye XMLHttpRequest
Sayfanın bazı bölümlerinden, zaman bağlı kalmadan bilgi çekmek mümkündür. Bu da değişken olan zaman ve kullanıcı eylemlerine göre dinamik içeriği görüntülemeye imkan verir. Bu  Ajax
arkasındaki teknolojidir.
JavaScript Motorunun Anında Derlenmesi  ( JIT-Compiling ) 
Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.
 Tarayıcı Geçmiş Bilgisi API' si
Tarayıcının belleğinde kalmış bilgiler üzerinde manipülasyon yapmaya imkan verir. Bu özellikle web sayfaları için etkileşimli bilgileri yüklemek için yararlıdır.
contentEditable elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme
HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.
Drag ve Drop (Sürükle-Bırak) Özelliği 
HTML5, sürükle-bırak özelliği web siteleri içi ve web sayfaları arasında öğeleri sürükleme özelliğini destekler. Bu aynı zamanda daha basit API' lerin uzantılar ve mozilla tabanlı uygulamalar için kullanılabilmesini sağlar.
HTML Focus Yönetimi (Odaklama)
Yeni HTML5, activeElement ve hasFocus() özelliklerini desteklemektedir.
Web Tabanlı Protokol İşleyicileri
Şimdi web uygulamalarını,
 navigator.registerProtocolHandler()
metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.
requestAnimationFrame
En iyi performansı almak için animasyonların render kontrolüne imkan tanır.
Tam Ekran API'si
Tarayıcı UI (User Interface) yani kullanıcı arabirimi olmaksızın bir web sayfası yahut uygulama için ekranın bütününü denetler.
İşaretçi Kilitlenme (Lock) API' si
İşaretçinin pencere sınırını aşabileceği durumlarda, çoğu oyun ve benzeri uygulamaların bütünlüğünü kaybetmemesi için işaretçinin web sayfasının içeriğine kilitlenmesine (Ya kısıtlanmasına yahut hareketinin sınırlandırılmasına) imkan verir.
Çevrimiçi ve Çevrimdışı Olaylar
Çevrimdışı özelliği barındıran iyi bir web uygulaması oluşturabilmeniz için uygulamanın ne zaman çevrimdışı olduğunu bunun yanında uygulamanızın ne zaman tekrar çevrim içi duruma döndüğünü bilmeniz gerekir.

cihaz erişimi

 Kamera API'sinin Kullanımı
Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.
Dokunmatik Olaylar
Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.
Konum Bilgisinin (GeoLocation) Kullanılması
Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.
Cihaz Yönünü Saptama
Cihazın çalıştığı tarayıcıyla ilgili yön değişiklikleri hakkında bilgi alınabilir. Bu bir giriş cihazı olarak (örneğin cihazın yer değiştirmesine bağlı oyunlar yapmak) veya ekranın yönünün sayfanın düzenine bağlı olarak (yatay ve dikey) olarak adapte edilebilmesi için kullanışlıdır.
İşaretçi (Kilitleme-Sabitleme) API'si
İşaretçi ekranın dışına ulaştığında birçok oyun ve benzeri uygulamaların merkezinin kaybolmaması amacıyla işaretçinin içerik için sabitlenmesine olanak verir.

Stİller

CSS çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. CSS3 olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; 
1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.

Yeni Arkaplan Stil Özellikleri
box-shadow komutuyla bir kutuya gölge efekti vermek ve çoklu arkaplan ayarlamaya izin vermiştir.
Daha Süslü Çerçeveler
Sadece border-image ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.
border-radius özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.
Stillerinizin Animasyonlaştırılması
Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde CSS animasyonları kullanarak animasyon yapmada CSS Transitions (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz  
Tipoğrafi İyileştirmeleri
Web tasarımcıları mükemmel tipoğrafiye (Ekrana Basma) ulaşmak için güçlü kontrole sahip olurlar. Bu kontroller için text-overflow ve hyphenationshadow (gölge) ekleyerek veya daha detaylı şekillendirmelerde  decorations (şekillendirme) komutlarını kullanabilirler. Bu iyileştirme varsayılan yazı tiplerini içerir bu na da @font-face kurallar topluluğuyla imkan tanır. 
Yeni Sunum Düzenleri
Tasarım etkinliğini arttırmak için,  CSS multi-column layout 
(CSS Çoklu Satır Düzenleri) ve CSS flexible box layout (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme eklendi.

 

 
 
 
 
 
 
 
 
 
 
 
Text-to-speech function is limited to 100 characters
 

Document Tags and Contributors

Contributors to this page: saidkocdemir, teoli, asliturk
Last updated by: saidkocdemir,