Embed Size (px)
Citation preview
Bir yazılım dili size neler sağlar?
HTML5 nedir?
HTML5 nedir?
Gündem
● Yeni Etiketlero Anlamsal Web
● Canvas● Çevrımdışı Depolama● Dosya Sistemi● WebWorker (Multithread)● Server-Sent Events● WebSocket● WebRTC● Çeşitli Özellikler● HTML5’in Geleceği
Yeni Etiketler
● <audio>● <video>● <datalist>● <keygen>● <output>● <dialog>● <progress> ● ...
Anlamsal Web
HTML4 Yapısı<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title> Basit bir HTML Sayfası </title> </head> <body> <div id='header'>Baslik</div> <div id='content'>Icerik</div> <div id='footer'>Altbilgi</div> </body></html>
Anlamsal Web
Anlamsal(Semantic) Web nedir?
Anlamsal Web
Canvas
Grafik(2D, 3D) çizme alanı
Canvas
Canvas
Canvas
Çevrımdışı Depolama
● Önbellek (AppCache)● Web Belleği● Indexed DB
Çevrımdışı Depolama
● Önbellek (AppCache)<html manifest=”onbellek.mf”></html>CACHE MANIFEST# v2 2014-02-14CACHE:style.cssNETWORK:cevrimici.htmlFALLBACK:/ 404.html
Çevrımdışı Depolama
● Web BelleğilocalStorage.setItem("lastname", "Salih");localStorage.getItem("lastname");
sessionStorage.setItem(“lastname”, “Akın”);sessionStorage.getItem(“lastname”);
● Web Belleği vs Cookie
Çevrımdışı Depolama
● Indexed DBo Veritabanıo No SQL (Anahtar - Değer ilişkisi)
Dosya Sistemi
● Dosya işlemlerio Okumao Yazmao Güncellemeo Silme
WebWorkers
WebWorker Nedir?
WebWorkers
● WebWorkers var worker = new Worker(“dosya.js”);● Shared Workersvar worker = new Worker(“dosya.js”);calisanNesnesi.port.postMessage(“baslat”);
Server-Sent Events
Server-Sent Events Nedir?
Server-Sent Events
Server-Sent Events
● Server-Sent Eventsvar eventSource = new EventSource(“guncel.php”);
data:Bu birinci satır\ndata:İkinci satır\ndata:Son satır\n\n
AJAX
Ajax Nedir?
XMLHttpRequests 2
● Cross-origin İstekleri
XMLHttpRequests 2
● Dosya Yükleme
WebSocket
WebSocket Nedir?
WebSocket
WebRTC
WebRTC Nedir?
WebRTC
Bazı Özellikler
● Tarih Nesnesi● Konum bilgisi alma● Bağlantı kontrolü● Cihaz Yönelimi● Sürükle&Bırak● ...TSML5 ile ne yapamazsınız ki
#2?
Özet
● Yeni Etiketlero Anlamsal Web
● Canvas● Çevrımdışı Depolama● Dosya Sistemi● WebWorker (Multithread)● Server-Sent Events● WebSocket● WebRTC● Çeşitli Özellikler● HTML5’in Geleceği
Sonuç: HTML5’in Geleceği
