JAVASCRIPT ANIMATIONS & INTERNATIONALIZATION EĞİTİMİ

Akıcı animasyon ve çok dilli arayüzler kurun

Web Animations API'den zaman çizelgesine, Intl API ile çok dilli yerelleştirmeye

JavaScript Animations & Internationalization Eğitimi, akıcı arayüz animasyonlarını ve çok dilli uygulama geliştirmeyi birlikte öğretir.

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

requestAnimationFrame ve Web Animations API'den Intl ve i18n ile çok dilli arayüzlere

JavaScript Animations & Internationalization Eğitimi, akıcı kullanıcı arayüzü animasyonlarını ve çok dilli, bölgeye duyarlı uygulamaları birlikte öğretir. Katılımcılar requestAnimationFrame, CSS geçişleri ve Web Animations API ile performanslı animasyonlar kurar; easing, zaman çizelgesi ve kaydırmaya bağlı efektleri uygular. Program yerleşik Intl API ile sayı, tarih, para ve çoğul biçimlendirmeyi, i18n kütüphaneleriyle çeviri yönetimini ve sağdan sola düzen desteğini kapsar.

Süre ve Format

3 Gün. Her gün dört modül; örnek bir arayüz üç gün boyunca önce animasyonlarla canlandırılır, ardından çok dilli ve bölgeye duyarlı hale getirilir.

Seviye

Orta Seviye — JavaScript ile akıcı animasyonlar ve çok dilli, bölgeye duyarlı arayüzler

Öğrenme Metodu

Örnek bir arayüz üç gün boyunca önce animasyon, sonra yerelleştirme katmanlarıyla zenginleştirilir; her modül canlı kodla uygulanır.

Neden Bu Eğitim?

🎬Akıcı deneyim

Performanslı animasyon teknikleriyle arayüzü canlandırır, kullanıcının dikkatini yönlendirir ve algılanan kaliteyi yükseltirsiniz.

🌍Küresel erişim

Intl API ve i18n yaklaşımıyla uygulamanızı farklı dillere ve bölgelere uyarlar, uluslararası kullanıcıya doğru deneyim sunarsınız.

⚙️Standart araçlar

Web Animations API ve yerleşik Intl gibi standart tarayıcı araçlarıyla ek yük olmadan güçlü ve uyumlu çözümler kurarsınız.

Anahtar Konular

javascript animasyon eğitimiweb animations apirequestanimationframejavascript i18n eğitimiintl api javascriptuluslararasılaştırma eğitimiçok dilli web uygulamasıjavascript yerelleştirmescroll animasyonön yüz eğitimi
“İyi bir animasyon dikkati yönlendirir, iyi bir yerelleştirme ise kullanıcıya kendi dilinde değer verildiğini hissettirir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve deneyim düzeyi

1
JavaScript bilgisi

Fonksiyon, dizi, nesne ve ES6 söz dizimine aşinalık beklenir; eğitim bu temel üzerine animasyon ve i18n kurar.

2
DOM ve CSS bilgisi

Temel DOM erişimi, CSS seçici ve transform/transition kavramlarına aşinalık animasyon konularını kolaylaştırır.

3
Tarayıcı araçları

Geliştirici araçları ve performans paneliyle temel çalışma, animasyon ve ölçüm örneklerinde faydalı olur.

4
Kod ortamı

Kod çalıştırmak için bir kod düzenleyici ve güncel bir tarayıcının kurulu olması gerekir.

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ı requestAnimationFrame döngüsünü kurar, CSS geçiş ve dönüşümlerini JavaScript'ten yönetir, kare tabanlı akıcı animasyonların temelini atar.
Modül 1
requestAnimationFrame
  • Kare tabanlı animasyon döngüsü kurma
  • Zaman damgasıyla kareden bağımsız hareket
  • delta zaman ile tutarlı hız hesabı
  • Animasyonu başlatma ve durdurma kontrolü
  • setInterval yerine rAF kullanma nedeni
  • Sekme arka plana alındığında davranış
Modül 2
CSS Geçişleri ve JavaScript
  • Sınıf ekleyip çıkararak geçiş tetikleme
  • transitionend olayını dinleme ve yakalama
  • style ile özellik değerini canlandırma
  • getComputedStyle ile mevcut değeri okuma
  • Geçiş süresi ve gecikme (delay) yönetimi
  • Reflow tetikleme ve zamanlama tuzakları
Modül 3
Dönüşümler ve Konumlandırma
  • translate, scale ve rotate dönüşümleri
  • transform-origin ile dönüş merkezi
  • 2B ve 3B dönüşüm (transform) temelleri
  • Katman (layer) ve will-change ipucu
  • Konum yerine transform tercih etme
  • Birden fazla dönüşümü birleştirme
Modül 4
Easing ve Hareket Hissi
  • Doğrusal ve eğrili (easing) hareket farkı
  • cubic-bezier ile özel easing tanımı
  • Hızlanma ve yavaşlama ile doğallık
  • Yay (spring) benzeri hareket yaklaşımı
  • Giriş ve çıkış (enter/exit) animasyonları
  • Hareketi azaltma tercihine (reduced motion) saygı
Günün hedefiKatılımcı Web Animations API ile programatik animasyonlar kurar, zaman çizelgesi ve kaydırmaya bağlı efektler tasarlar, animasyon performansını ölçüp iyileştirir.
Modül 1
Web Animations API
  • element.animate ile keyframe tanımı
  • Zamanlama seçenekleri (duration, easing)
  • Animation nesnesini duraklatma ve oynatma
  • playbackRate ile oynatma hızı kontrolü
  • finished sözüyle animasyon sonu yakalama
  • CSS animasyonuna göre avantajları
Modül 2
Zaman Çizelgesi ve Sıralama
  • Birden fazla animasyonu sıralama
  • Gecikme ve örtüşme (overlap) ile akış
  • Ardışık (stagger) giriş efektleri
  • Animasyonları gruplayıp senkronlama
  • Durumlar arası geçiş (transition) yönetimi
  • GSAP gibi kütüphanelere genel bakış
Modül 3
Kaydırmaya Bağlı Efektler
  • Scroll konumuna bağlı animasyon
  • IntersectionObserver ile görünürlük tetikleme
  • Paralaks (parallax) etkisi temeli
  • Kaydırmaya bağlı ilerleme göstergesi
  • Scroll-driven animations yaklaşımı
  • Performans için olay kısıtlama (throttle)
Modül 4
Performans ve Erişilebilirlik
  • Yalnızca transform ve opacity canlandırma
  • Düzen (layout) ve boya (paint) maliyeti
  • Performans panelinde kare süresi ölçümü
  • 60 fps hedefi ve takılma (jank) giderme
  • prefers-reduced-motion desteği
  • Animasyonda erişilebilirlik ilkeleri
Günün hedefiKatılımcı yerleşik Intl API ile sayı, tarih ve para biçimlendirir, çoğul ve göreli zaman kurallarını uygular, i18n kütüphaneleriyle çeviri ve RTL düzeni yönetir.
Modül 1
Intl Biçimlendirme
  • Intl.NumberFormat ile sayı biçimlendirme
  • Para birimi (currency) ve yüzde gösterimi
  • Intl.DateTimeFormat ile tarih ve saat
  • Zaman dilimi (timeZone) seçenekleri
  • Locale (dil-bölge) etiketi ve seçimi
  • Intl.Collator ile dile duyarlı sıralama
Modül 2
Çoğul ve Göreli Zaman
  • Intl.PluralRules ile çoğul kategorileri
  • Dile göre doğru çoğul biçim seçimi
  • Intl.RelativeTimeFormat kullanımı
  • "3 gün önce" gibi göreli ifadeler
  • Intl.ListFormat ile liste birleştirme
  • Çoğul ve cinsiyet duyarlı metin kurma
Modül 3
Çeviri Yönetimi ve i18n
  • Metinleri koddan çeviri dosyasına ayırma
  • Anahtar tabanlı çeviri (key) yapısı
  • Değişken ekleme (interpolation) desteği
  • i18next gibi kütüphanelerle kurulum
  • Dil değiştirme ve varsayılan dil (fallback)
  • Eksik çeviri ve çeviri bakımı akışı
Modül 4
RTL ve Bölgesel Uyum
  • Sağdan sola (RTL) düzen desteği
  • dir özniteliği ve mantıksal CSS özellikleri
  • Tarih, sayı ve adres bölgesel farkları
  • Font ve karakter desteği konuları
  • Locale'e göre içerik ve format değişimi
  • Yerelleştirme testi ve kalite kontrolü

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Kare tabanlı animasyon

requestAnimationFrame ile kareden bağımsız, akıcı animasyon döngüleri kurar ve hareket zamanlamasını doğru yönetirsiniz.

✅
CSS ve dönüşüm kontrolü

JavaScript'ten CSS geçişlerini ve transform özelliklerini yöneterek performanslı hareket efektleri oluşturursunuz.

✅
Web Animations API

element.animate ve Animation nesnesiyle programatik, kontrol edilebilir animasyonlar tasarlamayı öğrenirsiniz.

✅
Kaydırmaya bağlı efekt

IntersectionObserver ve scroll tabanlı tekniklerle kaydırmaya duyarlı, performanslı efektler kurarsınız.

✅
Animasyon performansı

Transform ve opacity odaklı yaklaşım, performans ölçümü ve reduced motion desteğiyle akıcı ve erişilebilir deneyim sağlarsınız.

✅
Intl ile biçimlendirme

Intl API ile sayı, tarih, para ve göreli zamanı bölgeye uygun biçimlendirmeyi uygulamalı öğrenirsiniz.

✅
Çeviri yönetimi

Metinleri koddan ayırır, anahtar tabanlı çeviri ve i18n kütüphaneleriyle çok dilli bir yapı kurarsınız.

✅
RTL ve bölgesel uyum

Sağdan sola düzen ve bölgesel biçim farklarını yöneterek uygulamayı farklı pazarlara doğru uyarlarsınız.

Kimler İçin Uygundur?

  • Kullanıcı arayüzüne akıcı animasyonlar katmak ve uygulamalarını çok dilli
  • farklı bölgelere uyumlu hale getirmek isteyen ön yüz geliştiricileri
  • uluslararası kullanıcıya hitap eden ürün ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Arayüzlerine akıcı animasyon katmak ve uygulamalarını çok dilli, bölgeye duyarlı hale getirmek isteyen ön yüz geliştiricileri için uygundur. JavaScript, temel DOM ve CSS bilgisi beklenir; uluslararası kullanıcıya hitap eden ürün ekipleri için özellikle faydalıdır.
Animasyon için hangi yaklaşımlar işleniyor?
requestAnimationFrame ile kare tabanlı animasyon, CSS geçiş ve dönüşümlerinin JavaScript'ten yönetimi, Web Animations API, kaydırmaya bağlı efektler ve performans optimizasyonu işlenir. GSAP gibi kütüphanelere de genel bir bakış sunulur.
Intl API ile neler yapılabilir?
Yerleşik Intl API ile sayı, para birimi, yüzde, tarih ve saat biçimlendirme; Intl.PluralRules ile çoğul kuralları; Intl.RelativeTimeFormat ile göreli zaman ve Intl.Collator ile dile duyarlı sıralama yapılabilir. Hepsi ek kütüphane gerektirmez.
Eğitim online mı yüz yüze mi veriliyor?
Eğitim hem yüz yüze hem online olarak verilebilir ve kurumun ihtiyaçlarına göre uyarlanır. Örnekler, kurumun hedef dilleri ve ürün arayüzüne göre özelleştirilebilir.
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, eğitim kapsamını ve tamamlanan modülleri belgeler.

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 d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. JavaScript Animations & Internationalization Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

JavaScript ve TypeScriptLearn to Code - Using JavaScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Learn to Code - Using JavaScript Eğitimi

4 günBaşlangıçOnline / Yüz Yüze / Hibrit

Sıfırdan programlama: değişken, koşul, döngü, fonksiyon, dizi, nesne ve DOM ile JavaScript öğreten başlangıç seviyesi uygulamalı eğitim.

Detayları Gör →
JavaScript ve TypeScriptNode.js & Node.js Tools in Visual Studio Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Node.js & Node.js Tools in Visual Studio Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js çekirdeği, event loop, çekirdek modüller ve Visual Studio NTVS ile proje, IntelliSense, hata ayıklama ve Azure dağıtımı eğitimi.

Detayları Gör →
JavaScript ve TypeScriptNode.js ile Mikroservis Geliştirme Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Node.js ile Mikroservis Geliştirme Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js ile mikroservis mimarisi: servis tasarımı, REST ve gRPC, mesajlaşma, API gateway, Docker, Kubernetes ve gözlemlenebilirlik eğitimi.

Detayları Gör →
JavaScript ve TypeScriptNode.js için JavaScript Geliştiricileri Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Node.js için JavaScript Geliştiricileri Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

JavaScript geliştiricileri için ileri Node.js: event loop, akışlar, asenkron desenler, worker threads, API, test, güvenlik ve dağıtım eğitimi.

Detayları Gör →
JavaScript ve TypeScriptNode.js Uygulama Geliştirme Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Node.js Uygulama Geliştirme Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js ile event loop, Express REST API, MongoDB, JWT kimlik doğrulama, test, clustering ve dağıtımı öğreten uygulamalı kurumsal eğitim.

Detayları Gör →
JavaScript ve TypeScriptNode.js, External Modules, & Operators Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Node.js, External Modules, & Operators Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js modül sistemi, npm ile harici modül kullanımı ve JavaScript operatörlerini (spread, destructuring, nullish) öğreten uygulamalı eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn