HTML Grafik ve Animasyon Teknikleri Eğitimi

Eğitim Hakkında

Canvas çiziminden SVG'ye, Web Animations API'den performanslı döngüye

HTML Grafik ve Animasyon Teknikleri Eğitimi, tarayıcıda dış kütüphaneye bağlı kalmadan grafik çizmeyi ve canlandırmayı öğretir. Katılımcılar Canvas 2B bağlamıyla şekil, yol ve görsel çizer; ardından SVG ile ölçeklenebilir vektör grafikleri oluşturur ve canlandırır. Program requestAnimationFrame ile akıcı döngüler, Web Animations API ile JavaScript kontrollü animasyonlar ve performans optimizasyonunu kapsar. Son gün etkileşimli bir veri görselleştirmesi birlikte kurulur.

Süre ve Format

3 Gün. Her gün dört modül; her teknik küçük bir çizim veya animasyon örneğiyle uygulanır ve performans tarayıcı araçlarıyla ölçülerek değerlendirilir.

Seviye

Orta Seviye — Canvas, SVG ve Web Animations API ile tarayıcıda grafik çizimi ve animasyonu öğreten program

Öğrenme Metodu

Her modülde çalışan bir çizim örneği kurulur; Canvas ve SVG yaklaşımları aynı sahnede karşılaştırılarak doğru araç seçimi öğretilir.

Neden Bu Eğitim?

🎨Kütüphanesiz grafik

Canvas ve SVG'yi doğrudan kullanarak dış kütüphanelere bağlı kalmadan hafif ve kontrollü grafik çözümleri üretirsiniz.

📊Veri görselleştirme

Grafik ilkelerini öğrenerek grafik, gösterge ve etkileşimli görselleştirmeleri sıfırdan kurma yetkinliği kazanırsınız.

⚡Akıcı animasyon

requestAnimationFrame ve Web Animations API ile takılmayan, performanslı ve senkronize animasyon döngüleri yazarsınız.

Anahtar Konular

canvas eğitimisvg eğitimihtml grafik eğitimiweb animasyon teknikleriweb animations apicanvas animasyonveri görselleştirme eğitimijavascript grafikrequestanimationframetarayıcı grafik programlama

“Tarayıcı güçlü bir tuval; piksel ve vektörü ne zaman seçeceğini bilmek, hafif ve etkileyici grafiğin anahtarıdır.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve hazırlık

1

HTML temeli

Belge yapısı ve temel etiketleri bilmek, grafik öğelerini sayfaya yerleştirmeyi kolaylaştırır.

2

Temel JavaScript

Değişken, fonksiyon ve döngü gibi temel JavaScript kavramlarına aşinalık çizim kodunu yazmak için gereklidir.

3

Koordinat sistemi

x ve y ekseni ile basit geometri bilgisi şekilleri doğru konumlandırmayı kolaylaştırır.

4

Geliştirme ortamı

Bir metin editörü ve geliştirici araçları olan güncel bir tarayıcı çalışmalar için 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ı Canvas 2B bağlamını kurar, şekil ve yol çizer, renk ve gradyan uygular, görsel ve metin yerleştirir ve dönüşümlerle çizim yüzeyini yönetir.

Modül 1

Canvas Bağlamı ve Temel Şekiller

canvas etiketi ve genişlik yükseklik ayarı
getContext ile 2B çizim bağlamının alınması
fillRect ve strokeRect ile dikdörtgen çizimi
clearRect ile alanın temizlenmesi
fillStyle ve strokeStyle ile renk tanımı
lineWidth ve çizgi uçları ile kenar biçimi

Modül 2

Yollar ve Eğriler

beginPath ve moveTo ile yol başlatma
lineTo ile düz çizgi segmentleri
arc ile daire ve yay segmenti çizimi
quadraticCurveTo ve bezierCurveTo eğrileri
closePath, fill ve stroke ile yolu tamamlama
Karmaşık ikon ve şeklin yollarla kurulması

Modül 3

Renk, Gradyan ve Görsel

Doğrusal ve radyal gradyan oluşturma
createPattern ile desen doldurma
globalAlpha ile saydamlık kontrolü
drawImage ile görsel ve kırpma çizimi
fillText ve strokeText ile metin yazma
shadowBlur ve shadowColor ile gölge efekti

Modül 4

Dönüşüm ve Durum

translate ile çizim orijinini kaydırma
rotate ve scale ile döndürme ve ölçekleme
save ve restore ile çizim durumu yığını
setTransform ile dönüşüm matrisi
Kesişim (clipping) alanı tanımlama
Piksel verisine getImageData ile erişim

Günün hedefiKatılımcı SVG ile ölçeklenebilir vektör şekilleri çizer, path komutlarıyla karmaşık formlar oluşturur, viewBox ile ölçekler ve SVG'yi CSS ile stillendirip canlandırır.

Modül 1

SVG Temel Şekiller

svg öğesi ve koordinat alanı tanımı
rect, circle ve ellipse temel şekilleri
line, polyline ve polygon çizimi
fill, stroke ve stroke-width öznitelikleri
SVG'nin satır içi ve dosya olarak kullanımı
SVG ile raster görselin farkı ve avantajı

Modül 2

Path Komutları ve viewBox

path d özniteliği ve komut harfleri
M, L, H ve V taşıma ve çizgi komutları
C ve Q ile bezier eğri komutları
A ile yay ve Z ile yolu kapatma
viewBox ile ölçeklenebilir koordinat sistemi
preserveAspectRatio ile ölçekleme davranışı

Modül 3

SVG Stil ve Efektler

CSS ile SVG öğelerini stillendirme
defs ve gradyan tanımlarının yeniden kullanımı
clipPath ve mask ile kırpma ve maskeleme
filter ile bulanıklık ve gölge efektleri
use ile tekrar eden öğenin paylaşılması
currentColor ile tema uyumlu ikon rengi

Modül 4

SVG Animasyon Teknikleri

CSS transition ve keyframe ile SVG canlandırma
stroke-dasharray ile çizgi çizilme etkisi
stroke-dashoffset ile ilerleyen yol animasyonu
transform ile SVG öğesinin döndürülmesi
SMIL animate öğesinin kullanımı ve sınırları
JavaScript ile SVG özniteliklerinin güncellenmesi

Günün hedefiKatılımcı requestAnimationFrame ile akıcı döngü kurar, Web Animations API ile animasyonları programatik denetler, etkileşim ekler ve performansı ölçerek etkileşimli bir görselleştirme tamamlar.

Modül 1

requestAnimationFrame Döngüsü

requestAnimationFrame ile ekrana senkron döngü
deltaTime ile kare bağımsız hareket
Canvas'ı her karede temizleyip yeniden çizme
Basit fizik ile konum ve hız güncelleme
cancelAnimationFrame ile döngüyü durdurma
Parçacık (particle) sistemiyle çoklu nesne

Modül 2

Web Animations API

element.animate ile keyframe ve seçenekler
Animation nesnesiyle play, pause ve reverse
playbackRate ile oynatma hızı denetimi
finished sözüyle animasyon bitişini bekleme
getAnimations ile aktif animasyonlara erişim
CSS animasyonuna göre programatik üstünlük

Modül 3

Etkileşim ve Girdi

Canvas üzerinde fare konumunun hesaplanması
Tıklama ve sürükleme ile nesne seçimi
Çarpışma (hit test) denetiminin yapılması
Pointer olaylarıyla dokunmatik desteği
Klavye girdisiyle sahnenin denetimi
Etkileşimli öğelerde erişilebilirlik alternatifi

Modül 4

Performans ve Proje

Gereksiz yeniden çizimden kaçınma stratejileri
Çevrim dışı canvas ve katman ayrımı
Geliştirici araçlarında kare hızının izlenmesi
Canvas ve SVG arasında doğru araç seçimi
prefers-reduced-motion ile hareketi azaltma
Etkileşimli bir grafik görselleştirmenin kurulması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Canvas çizimi

2B bağlamla şekil, yol ve eğri çizer, renk ve gradyan uygulayarak dinamik çizim yüzeyleri oluşturursunuz.

✅

Görsel ve metin

drawImage, fillText ve gölge efektleriyle görsel ve metni Canvas üzerine kontrollü biçimde yerleştirirsiniz.

✅

Dönüşüm yönetimi

translate, rotate, scale ve save-restore yığınıyla çizim koordinat sistemini güvenle dönüştürürsünüz.

✅

SVG grafik

SVG şekilleri, path komutları ve viewBox ile keskinliğini her ölçekte koruyan vektör grafikler üretirsiniz.

✅

SVG efekt ve animasyon

clipPath, filter ve stroke-dashoffset ile SVG'yi maskeler, filtreler ve akıcı biçimde canlandırırsınız.

✅

Animasyon döngüsü

requestAnimationFrame ve deltaTime ile kare bağımsız, akıcı ve denetlenebilir animasyon döngüleri kurarsınız.

✅

Web Animations API

element.animate ve Animation nesnesiyle animasyonları programatik olarak oynatır, duraklatır ve yönetirsiniz.

✅

Etkileşim ve performans

Fare ve dokunma girdisi, çarpışma denetimi ve performans ölçümüyle etkileşimli bir görselleştirme tamamlarsınız.

Kimler İçin Uygundur?

Tarayıcıda grafik ve animasyon üretmek isteyen ön yüz geliştiricileri
veri görselleştirme
interaktif içerik kurmak isteyen yazılımcılar ve HTML ile JavaScript temeli olan bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Tarayıcıda grafik ve animasyon üretmek isteyen ön yüz geliştiricileri, veri görselleştirme kuran yazılımcılar ve HTML ile temel JavaScript bilen öğrenciler için uygundur. Değişken, fonksiyon ve döngü düzeyinde JavaScript bilgisi beklenir.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Her teknik küçük bir çizim veya animasyon örneğiyle uygulanır. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.

Canvas mı SVG mi öğretiliyor?

İkisi de işlenir. İlk gün piksel tabanlı Canvas, ikinci gün vektör tabanlı SVG ayrıntılı ele alınır ve her birinin güçlü yönleri karşılaştırılır. Böylece hangi senaryoda hangi aracın doğru olduğunu seçmeyi öğrenirsiniz.

Hangi kütüphaneler kullanılıyor?

Eğitim bilinçli olarak dış grafik kütüphanesi kullanmadan ilerler; Canvas API, SVG ve Web Animations API doğrudan işlenir. Temeller kavrandıktan sonra bir kütüphaneye geçmek çok daha kolay ve bilinçli olur.

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 kurulan grafik görselleştirmesini 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 GRAFİK VE ANİMASYON TEKNİKLERİ EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Canvas Bağlamı ve Temel Şekiller

Yollar ve Eğriler

Renk, Gradyan ve Görsel

Dönüşüm ve Durum

SVG Temel Şekiller

Path Komutları ve viewBox

SVG Stil ve Efektler

SVG Animasyon Teknikleri

requestAnimationFrame Döngüsü

Web Animations API

Etkileşim ve Girdi

Performans ve Proje

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Bootstrap Environment, Requirements, & Setup Eğitimi

Bootstrap Forms & Layout Eğitimi

Browsers and HTML in Adobe Dreamweaver CC Eğitimi

Creating Responsive Projects with Captivate Eğitimi

CSS Responsive Web Design Training Eğitimi

Databases, Bootstrap, & jQuery in Web Design Eğitimi