--- name: zzafergok/html-slides-skill source: https://app.decimal.ai/s/zzafergok-html-slides-skill@1/SKILL.md source_sha256: a8453a2edc7b --- # HTML Slides Skill (reveal.js) reveal.js ile interaktif, web tabanlı sunumlar oluşturma rehberi. ## When to use this skill - Teknik sunum, konferans konuşması veya ürün lansmanı için slayt hazırlanırken - Kod walthrough içeren sunum gerektiğinde - Speaker notes ve zamanlayıcılı sunum istendiğinde - Self-contained HTML sunum dosyası oluşturulacağında --- ## 1. Temel Yapı ```html
Slayt 1
Slayt 2
``` --- ## 2. Slayt Yapıları ### Yatay ve Dikey Slaytlar ```html
Slayt 1
Slayt 2
Dikey 1
Dikey 2
``` ### Tema Seçenekleri `black`, `white`, `league`, `beige`, `sky`, `night`, `serif`, `simple`, `solarized`, `blood`, `moon` ```html ``` --- ## 3. Animasyonlar (Fragments) ```html

İlk görünen

Sonra bu

Sonra bu

Vurgulanan

``` Fragment stilleri: `fade-in`, `fade-out`, `fade-up`, `fade-down`, `fade-left`, `fade-right`, `highlight-red`, `highlight-blue`, `highlight-green`, `strike` --- ## 4. Kod Bloğu ```html 

const kullanici = {
  ad: 'Zafer',
  meslek: 'Geliştirici'
};
console.log(kullanici.ad);
``` --- ## 5. Speaker Notes ```html

Başlık

İçerik

``` --- ## 6. Arka Plan Seçenekleri ```html
``` --- ## 7. Konfigürasyon ```javascript Reveal.initialize({ controls: true, progress: true, slideNumber: true, hash: true, history: true, keyboard: true, overview: true, center: true, touch: true, transition: 'slide', // none, fade, slide, convex, concave, zoom transitionSpeed: 'default', // default, fast, slow autoSlide: 0, // 0 = devre dışı width: 960, height: 700, margin: 0.04, plugins: [RevealMarkdown, RevealHighlight, RevealNotes], }) ``` --- ## 8. Hazır Örnek — Teknik Sunum ```html API Tasarımı

API Tasarımı

2025 En İyi Pratikler

Geliştirici Ekibi

Gündem

  1. RESTful Prensipler
  2. Kimlik Doğrulama
  3. Hata Yönetimi
  4. Dokümantasyon

RESTful Prensipler

Resource Naming


GET    /users           # Koleksiyon
GET    /users/123       # Tek kaynak
POST   /users          # Oluştur
PUT    /users/123       # Güncelle
DELETE /users/123      # Sil

Sorular?

api-ekibi@sirket.com

``` --- ## 9. Auto-Animate ```html

Çözümümüz

AI Destekli Otomasyon

Çözümümüz

AI Destekli Otomasyon

%90 daha hızlı

``` --- ## 10. Kaynaklar - Resmi Dokümantasyon: https://revealjs.com/ - Demo: https://revealjs.com/demo/ - GitHub: https://github.com/hakimel/reveal.js