html5 ile gelen yenilikler
TRANSCRIPT
![Page 2: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/2.jpg)
Bir yazılım dili size neler sağlar?
![Page 3: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/3.jpg)
HTML5 nedir?
![Page 4: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/4.jpg)
HTML5 nedir?
![Page 5: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/5.jpg)
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
![Page 6: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/6.jpg)
Yeni Etiketler
● <audio>● <video>● <datalist>● <keygen>● <output>● <dialog>● <progress> ● ...
![Page 7: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/7.jpg)
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>
![Page 8: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/8.jpg)
Anlamsal Web
Anlamsal(Semantic) Web nedir?
![Page 9: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/9.jpg)
Anlamsal Web
![Page 10: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/10.jpg)
Canvas
Grafik(2D, 3D) çizme alanı
![Page 11: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/11.jpg)
Canvas
![Page 12: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/12.jpg)
Canvas
![Page 13: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/13.jpg)
Canvas
![Page 14: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/14.jpg)
Çevrımdışı Depolama
● Önbellek (AppCache)● Web Belleği● Indexed DB
![Page 15: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/15.jpg)
Çevrımdışı Depolama
● Önbellek (AppCache)<html manifest=”onbellek.mf”></html>CACHE MANIFEST# v2 2014-02-14CACHE:style.cssNETWORK:cevrimici.htmlFALLBACK:/ 404.html
![Page 16: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/16.jpg)
Ç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
![Page 17: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/17.jpg)
Çevrımdışı Depolama
● Indexed DBo Veritabanıo No SQL (Anahtar - Değer ilişkisi)
![Page 18: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/18.jpg)
Dosya Sistemi
● Dosya işlemlerio Okumao Yazmao Güncellemeo Silme
![Page 19: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/19.jpg)
WebWorkers
WebWorker Nedir?
![Page 20: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/20.jpg)
WebWorkers
● WebWorkers var worker = new Worker(“dosya.js”);● Shared Workersvar worker = new Worker(“dosya.js”);calisanNesnesi.port.postMessage(“baslat”);
![Page 21: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/21.jpg)
Server-Sent Events
Server-Sent Events Nedir?
![Page 22: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/22.jpg)
Server-Sent Events
![Page 23: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/23.jpg)
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
![Page 24: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/24.jpg)
AJAX
Ajax Nedir?
![Page 25: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/25.jpg)
![Page 26: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/26.jpg)
XMLHttpRequests 2
● Cross-origin İstekleri
![Page 27: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/27.jpg)
XMLHttpRequests 2
● Dosya Yükleme
![Page 28: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/28.jpg)
WebSocket
WebSocket Nedir?
![Page 29: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/29.jpg)
WebSocket
![Page 30: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/30.jpg)
![Page 31: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/31.jpg)
WebRTC
WebRTC Nedir?
![Page 32: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/32.jpg)
![Page 33: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/33.jpg)
WebRTC
![Page 34: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/34.jpg)
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?
![Page 35: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/35.jpg)
Ö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
![Page 36: Html5 ile Gelen Yenilikler](https://reader031.vdocuments.pub/reader031/viewer/2022032023/55becfa0bb61eb08728b4731/html5/thumbnails/36.jpg)
Sonuç: HTML5’in Geleceği