HTML5 İleri Özellikler Eğitimi — Canvas, API

Eğitim Hakkında

Yeni anlamsal etiketlerden Canvas, SVG, Web Storage ve cihaz API'lerine kadar

HTML - Content Authoring with New and Advanced Features Eğitimi, HTML5'in temel işaretlemenin ötesine geçen gelişmiş yeteneklerini uygulamalı öğretir. Katılımcılar yeni anlamsal etiketleri, gelişmiş form giriş türlerini ve yerleşik doğrulamayı; audio, video ve track ile multimedyayı; Canvas ve SVG ile grafiği; Web Storage, IndexedDB, Geolocation, Drag and Drop ve çevrimdışı çalışma gibi API'leri işler. Program zengin ve erişilebilir HTML5 içerik üretmeyi hedefler.

Süre ve Format

5 Gün. Her gün dört modül; her yeni HTML5 özelliği küçük bir demo ile kurulur, tarayıcı desteği ve erişilebilirlik birlikte değerlendirilir.

Seviye

İleri Seviye — HTML5'in gelişmiş form, multimedya, grafik, depolama ve cihaz API'leriyle zengin içerik

Öğrenme Metodu

Her gelişmiş özellik ayrı bir mini demoda uygulanır; tarayıcı uyumluluğu ve zarif geri çekilme (graceful degradation) birlikte denenir.

Neden Bu Eğitim?

🚀Zengin içerik

Canvas, SVG, video ve gelişmiş formlarla eklenti gerektirmeyen, doğrudan tarayıcıda çalışan etkileşimli içerikler üretirsiniz.

🧠API ustalığı

Web Storage, IndexedDB, Geolocation ve Web Workers gibi tarayıcı API'lerini kullanarak güçlü istemci tarafı yetenekler kazanırsınız.

📶Çevrimdışı deneyim

Service Worker ve cache yaklaşımlarıyla zayıf bağlantıda da çalışan, hızlı ve dayanıklı web deneyimleri tasarlarsınız.

Anahtar Konular

html5 eğitimihtml5 ileri seviyecanvas eğitimisvg eğitimiweb storage indexeddbhtml5 api eğitimiservice worker eğitimiçevrimdışı web uygulamasıhtml5 form doğrulamaweb geliştirme ileri

“HTML5 artık yalnızca işaretleme değil; tarayıcıyı tam bir uygulama platformuna dönüştüren güçlü yetenekler bütünüdür.”

Ön Koşullar

Eğitimden en iyi verimi almak için önerilen bilgi düzeyi

1

Sağlam HTML temeli

Belge yapısı, anlamsal etiketler, bağlantı, tablo ve temel form bilgisi önceden edinilmiş olmalıdır.

2

Temel JavaScript

Değişken, fonksiyon ve olay dinleme gibi JavaScript kavramları API örneklerini anlamayı sağlar.

3

CSS aşinalığı

Seçici, kutu modeli ve temel yerleşim bilgisi görsel örnekleri takip etmeyi kolaylaştırır.

4

Geliştirici araçları

Tarayıcı konsolu, ağ ve uygulama sekmelerini kullanabilmek demoların incelenmesini sağlar.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı HTML5'in anlamsal etiketleriyle doküman anahattı kurar; yeni giriş türleri, öznitelikler ve yerleşik kısıt doğrulamasıyla güçlü ve erişilebilir formlar oluşturur.

Modül 1

HTML5 Anlamsal Etiketler

article, section, nav ve aside anahtar rolleri
header, footer ve main ile belge düzeni
figure, figcaption ve mark anlamsal kullanımı
time etiketiyle makine okunur tarih bilgisi
details ve summary ile açılır içerik bölümü
Doküman anahattı (outline) ve başlık düzeyi

Modül 2

Yeni Input Türleri

email, url ve tel ile özel klavye ve kontrol
date, time ve datetime-local tarih seçiciler
range ile kaydırıcı ve number ile sayısal giriş
color ile renk seçici giriş alanı
search ve file türlerinin davranışı
autocomplete ve inputmode ipuçları

Modül 3

Form Öznitelikleri ve datalist

placeholder, required ve autofocus öznitelikleri
pattern ile düzenli ifade tabanlı kısıt
min, max ve step ile sayısal sınırlar
datalist ile serbest metinli öneri listesi
multiple ve accept ile dosya seçimi kontrolü
form, formaction ve novalidate öznitelikleri

Modül 4

Yerleşik Kısıt Doğrulama

Tarayıcının otomatik geçerlilik kontrolü
:valid ve :invalid pseudo sınıflarıyla stil
ValidityState nesnesiyle hata türünü okuma
setCustomValidity ile özel hata mesajı
checkValidity ve reportValidity yöntemleri
Erişilebilir hata gösterimi ve odak yönetimi

Günün hedefiKatılımcı audio ve video etiketleriyle eklentisiz medya oynatır, track ile altyazı sağlar, Media API ile oynatmayı kontrol eder ve gömülü içeriği güvenli biçimde yerleştirir.

Modül 1

Video ve Audio Etiketleri

video ve audio ile eklentisiz medya oynatma
controls, autoplay, loop ve muted öznitelikleri
source ile birden fazla codec alternatifi
poster ile video başlangıç görseli
preload ile ön yükleme stratejisi seçimi
MP4, WebM ve Ogg biçim ve codec uyumu

Modül 2

Altyazı ve Erişilebilirlik

track etiketiyle altyazı ve açıklama ekleme
WebVTT biçiminde zaman kodlu metin
kind=captions, subtitles ve descriptions ayrımı
srclang ve label ile dil seçeneği sunma
Medya için metin alternatifi sağlama
Klavye ile oynatıcı kontrolü ve odak

Modül 3

Media API ile Kontrol

play, pause ve currentTime ile JS kontrolü
timeupdate ve ended olaylarını dinleme
volume, playbackRate ve muted yönetimi
Özel oynatıcı arayüzü için olay bağlama
buffered ile tampon durumunu okuma
Picture-in-Picture ve tam ekran API'si

Modül 4

Gömülü ve Harici İçerik

iframe ile harici sayfayı gömme
sandbox özniteliğiyle güvenlik kısıtı
loading=lazy ile tembel yükleme
embed ve object ile diğer içerik türleri
responsive gömülü içerik için oran kutusu
Üçüncü taraf içeriğin gizlilik etkisi

Günün hedefiKatılımcı Canvas ile piksel tabanlı çizim ve animasyon üretir, SVG ile ölçeklenebilir vektör grafiği oluşturur ve iki yaklaşımın güçlü yanlarını senaryoya göre seçer.

Modül 1

Canvas 2D Temelleri

canvas etiketi ve getContext ile 2D bağlam
fillRect, strokeRect ve clearRect ile dikdörtgen
beginPath, moveTo ve lineTo ile yol çizimi
arc ile daire ve yay çizme işlemi
fillStyle, strokeStyle ve lineWidth ayarları
drawImage ile görsel ve metin yerleştirme

Modül 2

Canvas Dönüşüm ve Animasyon

save ve restore ile bağlam durumu yönetimi
translate, rotate ve scale dönüşümleri
requestAnimationFrame ile akıcı animasyon
Her karede temizleyip yeniden çizme döngüsü
Piksel verisine getImageData ile erişim
Yüksek DPI ekran için ölçekleme ayarı

Modül 3

SVG ile Vektör Grafiği

svg, rect, circle ve line temel şekilleri
path ve d özniteliğiyle karmaşık yol
viewBox ile koordinat sistemi ve ölçekleme
fill, stroke ve gradient tanımları
text ve tspan ile vektör metin
Satır içi SVG ile CSS ve DOM erişimi

Modül 4

SVG Etkileşim ve Seçim

SVG öğelerine olay dinleyici bağlama
CSS ile SVG stillendirme ve animasyon
symbol ve use ile yeniden kullanım
SMIL veya CSS ile SVG animasyonu
Canvas ve SVG arasında seçim kriterleri
Erişilebilir SVG için title ve role

Günün hedefiKatılımcı verileri tarayıcıda Web Storage ve IndexedDB ile saklar, Geolocation ve diğer cihaz API'lerini kullanır ve sürükle-bırak ile zengin etkileşim kurar.

Modül 1

Web Storage API Kullanımı

localStorage ve sessionStorage farkı
setItem, getItem ve removeItem kullanımı
JSON ile nesne serileştirme ve saklama
Depolama olayları (storage event) ile senkron
Depolama kota sınırı ve hata yönetimi
Hassas veriyi istemcide saklamama ilkesi

Modül 2

IndexedDB ile Yapısal Veri

Veritabanı ve object store oluşturma
Sürüm yükseltme ve şema değişimi (onupgradeneeded)
Transaction ile okuma ve yazma
index ile anahtar dışı alanda sorgulama
cursor ile kayıtlar üzerinde gezinme
Büyük veriyi çevrimdışı önbellekleme

Modül 3

Geolocation ve Cihaz API'leri

getCurrentPosition ile konum alma
watchPosition ile sürekli konum takibi
Konum izni ve gizlilik onayı yönetimi
Notification API ile masaüstü bildirimi
Clipboard API ile pano okuma ve yazma
Battery ve DeviceOrientation kısaca

Modül 4

Drag and Drop API

draggable özniteliğiyle öğeyi taşınabilir yapma
dragstart, dragover ve drop olayları
dataTransfer ile taşınan veriyi aktarma
dragover'da preventDefault ile bırakmaya izin
Dosyayı sürükleyip bırakarak yükleme
Erişilebilir alternatif etkileşim sunma

Günün hedefiKatılımcı Service Worker ile çevrimdışı çalışma kurar, Web Workers ile ağır işi arka plana taşır, Fetch ile veri alır ve performans ile erişilebilirliği birlikte değerlendirir.

Modül 1

Service Worker ve Çevrimdışı

Service Worker kaydı ve yaşam döngüsü
install, activate ve fetch olayları
Cache API ile kaynak önbellekleme
Cache-first ve network-first stratejileri
Web App Manifest ile yüklenebilir uygulama
HTTPS gerekliliği ve kapsam (scope)

Modül 2

Web Workers ile Paralellik

Worker oluşturma ve betiği ayrı iş parçacığında çalıştırma
postMessage ile ana iş parçacığıyla haberleşme
Ağır hesaplamayı arayüzü dondurmadan yapma
Transferable nesnelerle verimli veri aktarımı
SharedWorker ve servis farkının ayrımı
Worker içinde DOM erişiminin olmaması

Modül 3

Fetch ve Veri Alışverişi

fetch ile HTTP isteği ve Promise dönüşü
async ve await ile okunur asenkron kod
JSON yanıtını ayrıştırma ve hata yakalama
Request ve Response nesneleriyle başlık yönetimi
FormData ile dosya ve form gönderimi
CORS ve kimlik bilgisi (credentials) ilkeleri

Modül 4

Performans ve Erişilebilirlik

defer ve async ile betik yükleme stratejisi
loading=lazy ve görsel optimizasyonu
preconnect ve preload kaynak ipuçları
Lighthouse ile performans ve erişilebilirlik ölçümü
ARIA rolleriyle zengin bileşen erişilebilirliği
Zarif geri çekilme ve özellik tespiti

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Anlamsal anahat kurma

HTML5 bölüm etiketleriyle doğru doküman anahattı kurarak erişilebilir ve bakımı kolay sayfa yapıları oluşturursunuz.

✅

Gelişmiş form yazma

Yeni input türleri, öznitelikler ve kısıt doğrulamasıyla güçlü, kullanıcı dostu ve doğrulanan formlar kurabilirsiniz.

✅

Multimedya yönetimi

Audio ve video etiketleriyle eklentisiz medya oynatır, altyazı ve Media API ile erişilebilir deneyim sunarsınız.

✅

Canvas ile çizim

Canvas 2D bağlamıyla piksel tabanlı çizim ve animasyon üreterek etkileşimli grafik içerikleri oluşturabilirsiniz.

✅

SVG grafiği üretme

Ölçeklenebilir vektör grafikleri çizer, CSS ve DOM ile stillendirir ve senaryoya göre Canvas veya SVG seçersiniz.

✅

İstemci depolama

Web Storage ve IndexedDB ile veriyi tarayıcıda saklayarak çevrimdışı ve hızlı istemci tarafı uygulamalar kurarsınız.

✅

Cihaz API kullanımı

Geolocation, Drag and Drop ve diğer tarayıcı API'leriyle zengin ve bağlama duyarlı etkileşimler tasarlarsınız.

✅

Çevrimdışı ve performans

Service Worker, Web Workers ve Fetch ile çevrimdışı çalışan, performanslı ve dayanıklı web deneyimleri geliştirirsiniz.

Kimler İçin Uygundur?

Temel HTML bilgisini ileri taşımak isteyen ön yüz geliştiriciler
HTML5 API'leriyle zengin içerik kuran web uzmanları
tek sayfalı uygulama yazan yazılımcılar
modern web standartlarını derinleştirmek isteyen mühendisler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Temel HTML bilgisini ileri taşımak isteyen ön yüz geliştiriciler, HTML5 API'leriyle zengin içerik kuran web uzmanları ve modern web standartlarını derinleştirmek isteyen mühendisler için uygundur. Önceden sağlam HTML ve temel JavaScript bilgisi beklenir.

Eğitimin süresi ve formatı nedir?

Eğitim beş gün sürer ve her gün dört modülden oluşur. Her gelişmiş özellik ayrı bir mini demoda uygulanır, tarayıcı desteği ve erişilebilirlik birlikte değerlendirilir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanır.

JavaScript bilgisi şart mı?

Canvas, Web Storage, Fetch ve Service Worker gibi konular JavaScript gerektirdiği için temel JavaScript bilgisi beklenir. Değişken, fonksiyon ve olay dinleme düzeyinde bilgi yeterlidir; kodlar adım adım açıklanarak ilerlenir.

Hangi tarayıcı ve araçlar kullanılır?

Güncel Chrome veya Firefox ve tarayıcı geliştirici araçları kullanılır. Service Worker gibi özellikler HTTPS veya localhost gerektirir. Tarayıcı uyumluluğu ve zarif geri çekilme stratejileri eğitim boyunca birlikte değerlendirilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen HTML5 demolarını belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

HTML - CONTENT AUTHORING WITH NEW AND ADVANCED FEATURES EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

HTML5 Anlamsal Etiketler

Yeni Input Türleri

Form Öznitelikleri ve datalist

Yerleşik Kısıt Doğrulama

Video ve Audio Etiketleri

Altyazı ve Erişilebilirlik

Media API ile Kontrol

Gömülü ve Harici İçerik

Canvas 2D Temelleri

Canvas Dönüşüm ve Animasyon

SVG ile Vektör Grafiği

SVG Etkileşim ve Seçim

Web Storage API Kullanımı

IndexedDB ile Yapısal Veri

Geolocation ve Cihaz API'leri

Drag and Drop API

Service Worker ve Çevrimdışı

Web Workers ile Paralellik

Fetch ve Veri Alışverişi

Performans ve Erişilebilirlik

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Salesforce ile HTML ve CSS Eğitimi

Tailwind CSS Eğitimi

Temel Web Programlama (HTML, CSS, JavaScript) Eğitimi

Web Apps with web2py: Working with Prebuilt Bootstrap Templates Eğitimi

Web Development Fundamentals - HTML and CSS Eğitimi

Web Development with HTML, CSS, and JavaScript Eğitimi