HTML ve API ile Gelişmiş Uygulamalar Eğitimi

Eğitim Hakkında

Statik HTML'den, tarayıcı API'lerini kullanan veri odaklı uygulamalara geçiş

HTML ve API Kullanımı ile Gelişmiş Uygulamalar Eğitimi, statik sayfaların ötesine geçip tarayıcının web API'leriyle etkileşimli uygulamalar kurmayı öğretir. Katılımcılar DOM'u koddan yönetir, Fetch API ile uzak servisten JSON veri çeker ve gönderir. Ardından Web Storage, IndexedDB, Geolocation, Canvas ve dosya API'leri işlenir. Program WebSocket ile gerçek zamanlı veri, Service Worker ile çevrimdışı PWA ve Web Components ile biten uçtan uca bir proje ile tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından tek bir örnek uygulama adım adım geliştirilerek API'lerin gerçek projede nasıl birleştiği gösterilir.

Seviye

Orta Seviye — HTML ve tarayıcı API'leriyle veri odaklı, çevrimdışı çalışabilen web uygulamaları geliştirme

Öğrenme Metodu

Tek bir örnek uygulama üç gün boyunca katman katman geliştirilir; her modülde yeni bir tarayıcı API'si gerçek koda eklenir.

Neden Bu Eğitim?

🎯Dinamik uygulama kurma

Statik HTML bilginizi, veriyi çekip gösteren, saklayan ve kullanıcıyla etkileşen gerçek uygulamalar geliştirme becerisine taşırsınız.

🧩Çerçevesiz güçlü API'ler

React veya benzeri bir çatıya gerek kalmadan, tarayıcının kendi sunduğu standart API'lerle çok şey yapılabildiğini uygulayarak görürsünüz.

🚀Çevrimdışı ve gerçek zamanlı

Service Worker ile çevrimdışı çalışan ve WebSocket ile anlık güncellenen modern uygulama davranışlarını kendiniz kurarsınız.

Anahtar Konular

html api eğitimiweb api kursufetch api eğitimijavascript dom kursupwa eğitimiservice worker eğitimiindexeddb kursuwebsocket eğitimiweb uygulama geliştirme eğitimicanvas api eğitimi

“Modern web, çatılardan önce tarayıcının kendisiyle başlar; API'leri tanıyan geliştirici her çatıda daha güçlüdür.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve araçlar

1

HTML bilgisi

Etiket, öznitelik ve temel sayfa yapısını bilmek; semantik etiketlere aşinalık öğrenmeyi hızlandırır.

2

Temel JavaScript

Değişken, fonksiyon, dizi ve nesne gibi temel JavaScript kavramlarını tanımak gerekir.

3

Tarayıcı araçları

Chrome veya Firefox geliştirici araçlarının konsol ve ağ sekmesine temel düzeyde aşinalık faydalıdır.

4

Metin editörü

VS Code gibi bir editörün kurulu olması ve basit bir yerel sunucu çalıştırabilmek yeterlidir.

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ı DOM'u koddan güncelleyerek içeriği dinamikleştirir, Fetch API ile JSON veri çeker ve form verisini uzak bir servise gönderir.

Modül 1

Semantik HTML ve Belge Yapısı

header, main, section ve article ile anlamlı iskelet
data-* öznitelikleriyle koda veri gömme yaklaşımı
Erişilebilir yapı için landmark ve başlık hiyerarşisi
template etiketiyle çoğaltılabilir içerik kalıbı
Belge içinde script yükleme ve defer, async farkı
İçeriği veriyle doldurmaya uygun DOM iskeleti tasarımı

Modül 2

DOM ile Dinamik İçerik

querySelector ve querySelectorAll ile öğe seçimi
createElement ve append ile öğeyi programatik oluşturma
textContent, innerHTML ve güvenli içerik yazma farkı
classList ile sınıf ekleme, çıkarma ve değiştirme
dataset üzerinden data-* değerlerine erişim
DocumentFragment ile toplu ve verimli DOM güncelleme

Modül 3

Fetch API ve Asenkron Veri

fetch ile GET isteği ve Response nesnesinin okunması
response.json ile JSON yanıtını ayrıştırma
async ve await ile okunabilir asenkron akış
try-catch ile ağ ve ayrıştırma hatalarının yönetimi
AbortController ile isteği iptal etme ve zaman aşımı
Yükleniyor, hata ve boş durumlarının arayüze yansıması

Modül 4

Form ve API'ye Veri Gönderme

Form verisini FormData nesnesiyle toplama
fetch ile POST isteği ve istek gövdesi oluşturma
Content-Type başlığı ve JSON gövde gönderimi
HTML5 doğrulama öznitelikleri ile girdi denetimi
Sunucu yanıtına göre kullanıcıya geri bildirim verme
submit olayında preventDefault ile varsayılanı durdurma

Günün hedefiKatılımcı veriyi tarayıcıda saklamayı öğrenir, konum ve dosya API'lerini kullanır ve Canvas ile programatik çizim yaparak uygulamayı zenginleştirir.

Modül 1

Web Storage ve IndexedDB

localStorage ile kalıcı anahtar-değer saklama
sessionStorage ile oturum ömürlü geçici veri
JSON.stringify ve parse ile nesne saklama
IndexedDB ile yapısal ve büyük veri saklama mantığı
Object store, index ve transaction kavramları
Depolama sınırları ve veri temizleme stratejisi

Modül 2

Geolocation ve Konum

getCurrentPosition ile anlık konum alma
watchPosition ile konum değişimini izleme
Konum izni isteme ve ret durumunu yönetme
Enlem, boylam ve doğruluk değerlerinin kullanımı
Konumu bir harita servisiyle birlikte gösterme
Konum verisinin gizlilik ve güvenlik açısından ele alınması

Modül 3

Canvas ile Grafik ve Çizim

canvas bağlamı 2d context ile çizime başlama
Dikdörtgen, çizgi ve yol tabanlı şekil çizimi
fillStyle, strokeStyle ile renk ve dolgu yönetimi
Metin, görsel ve dönüşümlerin canvas'a yerleştirilmesi
requestAnimationFrame ile akıcı animasyon döngüsü
Canvas içeriğini görsel olarak dışa aktarma

Modül 4

Medya ve Dosya API'leri

File ve FileReader ile seçilen dosyayı okuma
Sürükle bırak ile dosya alma ve işleme
URL.createObjectURL ile önizleme gösterimi
getUserMedia ile kamera ve mikrofon erişimi
Blob ile ikili veri oluşturma ve indirme
Yüklenen görselin boyut ve tür doğrulaması

Günün hedefiKatılımcı WebSocket ile gerçek zamanlı veriyi işler, Service Worker ile çevrimdışı çalışan bir PWA kurar ve Web Components ile yeniden kullanılabilir bileşen yazar.

Modül 1

WebSocket ve Gerçek Zamanlı Veri

WebSocket bağlantısı açma ve yaşam döngüsü
message olayıyla sunucudan gelen veriyi işleme
send ile istemciden sunucuya veri gönderme
Bağlantı kopması ve yeniden bağlanma stratejisi
Gelen veriyle arayüzü anlık güncelleme
Polling ile WebSocket yaklaşımının karşılaştırılması

Modül 2

Service Worker ve PWA

Service Worker kaydı ve yaşam döngüsü aşamaları
install olayında varlıkların önbelleğe alınması
fetch olayını yakalayıp önbellekten yanıt verme
Cache Storage ile çevrimdışı çalışma stratejileri
manifest.json ile uygulamanın yüklenebilir olması
Push ve bildirim izinleriyle kullanıcıya ulaşma

Modül 3

Web Components ile Bileşen

customElements.define ile özel etiket tanımlama
Shadow DOM ile kapsüllenmiş stil ve yapı
template ve slot ile içerik yerleştirme
Öznitelik gözlemi ve attributeChangedCallback
Bileşen içi olay yayma ve dışarıdan dinleme
Bileşeni farklı sayfalarda yeniden kullanma

Modül 4

Bütünleşik Uygulama Projesi

API'den veri çeken ve listeleyen akışın kurulması
Verinin IndexedDB ile çevrimdışı saklanması
Service Worker ile uygulamanın çevrimdışı açılması
Web Component ile liste öğesinin bileşene dönüşmesi
Hata, boş ve yükleniyor durumlarının yönetimi
Uygulamanın yüklenebilir PWA olarak paketlenmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Dinamik DOM yönetimi

DOM'u koddan seçip oluşturarak ve güncelleyerek statik sayfaları veri odaklı, etkileşimli arayüzlere dönüştürebilirsiniz.

✅

Fetch ile veri alışverişi

Fetch API ve async-await ile uzak servislerden JSON veri çeker, form verisini POST ile güvenle gönderirsiniz.

✅

Tarayıcıda veri saklama

localStorage, sessionStorage ve IndexedDB ile kullanıcı verisini uygun yöntemle kalıcı veya geçici olarak saklayabilirsiniz.

✅

Cihaz API'lerini kullanma

Geolocation, dosya ve kamera API'leriyle konum, dosya ve medyaya erişen özellikleri uygulamanıza ekleyebilirsiniz.

✅

Canvas ile grafik

Canvas 2D bağlamıyla şekil, metin ve görsel çizer, requestAnimationFrame ile akıcı animasyonlar oluşturursunuz.

✅

Gerçek zamanlı veri

WebSocket ile sunucudan gelen veriyi anlık işleyip arayüzü canlı tutan gerçek zamanlı özellikler geliştirebilirsiniz.

✅

Çevrimdışı PWA

Service Worker ve Cache Storage ile çevrimdışı çalışan, yüklenebilir bir progresif web uygulaması kurabilirsiniz.

✅

Yeniden kullanılabilir bileşen

Web Components ve Shadow DOM ile stili kapsüllenmiş, farklı sayfalarda tekrar kullanılabilen özel öğeler yazarsınız.

Kimler İçin Uygundur?

HTML ve temel JavaScript bilen
sayfalarını dinamik ve veri odaklı uygulamalara dönüştürmek isteyen ön yüz geliştiriciler
tasarımdan koda geçen tasarımcılar
tarayıcı API'lerini öğrenmek isteyen yazılım öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML ve temel JavaScript bilen, sayfalarını dinamik uygulamalara dönüştürmek isteyen ön yüz geliştiriciler, tasarımcılar ve yazılım öğrencileri için uygundur. İleri JavaScript deneyimi gerekmez; temel kavramlar yeterlidir.

Bir çerçeve mi öğretiliyor?

Hayır, eğitim React veya Vue gibi bir çatı değil, tarayıcının kendi standart web API'lerini öğretir. Bu temel, sonradan hangi çatıyı öğrenirseniz öğrenin işinize yarayacak sağlam bir zemin oluşturur.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Tek bir örnek uygulama üç gün boyunca katman katman geliştirilir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.

Hangi API'ler işleniyor?

Fetch API, DOM, Web Storage, IndexedDB, Geolocation, Canvas, File ve getUserMedia, WebSocket, Service Worker ve Cache Storage ile Web Components işlenir. Her biri gerçek bir örnek uygulama içinde uygulamalı ele alınır.

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 örnek uygulamayı 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 VE API KULLANIMI İLE GELİŞMİŞ UYGULAMALAR EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Semantik HTML ve Belge Yapısı

DOM ile Dinamik İçerik

Fetch API ve Asenkron Veri

Form ve API'ye Veri Gönderme

Web Storage ve IndexedDB

Geolocation ve Konum

Canvas ile Grafik ve Çizim

Medya ve Dosya API'leri

WebSocket ve Gerçek Zamanlı Veri

Service Worker ve PWA

Web Components ile Bileşen

Bütünleşik Uygulama Projesi

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Responsive Web Tasarımı Eğitimi

Sass (Syntactically Awesome Style Sheets) Eğitimi

Temel Seviye HTML Eğitimi

Temel ve İleri Seviye HTML Eğitimi

Advanced Options & Responsive Web Design Eğitimi

API Development: HTML & Hypermedia Eğitimi