CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Proje sonu - Widget

HTML kursu · İleri seviye · Ders 51/56

Tüm parçaları birleştirip noscript yedeği ve data-* hook'ları ekleyip dokümante edersin.

Son adım: birleştir ve yedekle

Son derste tüm parçaları birleştirip widget'a sağlamlık katıyoruz. Üç şey ekleyeceğiz:

  • <noscript>: JavaScript kapalıyken yedek mesaj
  • data-* öznitelikleri: JavaScript kancaları
  • Belge üstüne bir açıklama yorumu

Böylece panel hem JavaScript'siz ortamda çalışır hem de dış betikler widget'ı kolayca bulur. Bu üç küçük ekleme widget'ı yayına hazır hale getirir.

noscript ve data-* kancaları

<noscript> etiketinin içeriği yalnızca JavaScript devre dışıyken gösterilir. Widget'ımıza 'Bu panel JavaScript gerektirir' gibi bir mesaj koyarız.

data-* öznitelikleri ise özel veri taşır; örneğin data-refresh="60" panelin her 60 saniyede bir yenileneceğini belirtir. Bu öznitelikler JavaScript'in widget'ı bulup yönetmesine yardımcı olur.

Böylece panel hem erişilebilir hem de betiklerle denetlenebilir kalır.

Uygulama Widget'ı tamamla: yorum, data-*, noscript

Önceki dersin widget'ını al. Üç şey ekle:

1) Belgenin en üstüne, <!DOCTYPE>'tan önce bir açıklama yorumu koy: <!-- Satış Paneli widget: KPA, tablo ve şablon içerir -->.

2) <section> etiketine id="sales-widget", data-widget="sales" ve data-refresh="60" özniteliklerini ekle.

3) </section>'dan sonra, <template>'den önce bir <noscript> ekle; içine <p>Bu panel JavaScript gerektirir; lütfen JavaScript'i etkinleştirin.</p> koy.

Örnek çözümü göster 
<!-- Satış Paneli widget: KPA, tablo ve şablon içerir -->
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Satış Paneli</title>
  </head>
  <body>
    <section id="sales-widget" data-widget="sales" data-refresh="60">
      <header>
        <h1>Satış Paneli</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Aylık ciro</figcaption>
            <p>₺124.500</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Ürün</th>
                <th>Satış</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Pamuklu tişört</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Keten pantolon</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <noscript>
      <p>Bu panel JavaScript gerektirir; lütfen JavaScript'i etkinleştirin.</p>
    </noscript>
    <template id="widget-template">
      <article>
        <header>
          <h2>Yeni Satış Paneli</h2>
        </header>
        <slot name="content">
          <p>Veri bekleniyor</p>
        </slot>
      </article>
    </template>
  </body>
</html>

Widget'ın tamam!

Tebrikler! 5 dersin sonunda elinde gerçek bir satış paneli widget'ı var: anlamsal kabuk, KPA ve tablo, yeniden kullanılabilir şablon ve yedekli çalışma hep birlikte.

Bu desenleri kendi panellerine taşıyabilirsin: header/main/article kabuğu, figure+table veri yapısı, template+slot yeniden kullanım ve noscript+data-* kancaları.

Sıradaki adım: bu widget'ı bir CSS kursuyla biçimlendirmek veya JavaScript ile canlı veriye bağlamak.

Kendini test et

  1. <noscript> etiketi ne zaman gösterilir?

    • JavaScript devre dışıyken veya yüklenemediğinde
    • Yalnızca CSS devre dışıyken
    • Sadece mobil tarayıcılarda
    • Hiçbir zaman, yalnızca yorum olarak işlenir
    Cevabı göster

    JavaScript devre dışıyken veya yüklenemediğinde — Doğru! noscript içeriği JavaScript devre dışıyken veya yüklenemediğinde gösterilir.

  2. data-* özniteliğini tamamla

    <section id="sales-widget" data-____="60">
</section>
    Cevabı göster 
    <section id="sales-widget" data-refresh="60">
</section>

  3. Son adım kavramlarını eşleştir

    noscript
    Script kapalıyken içerik
    data-*
    Özel veri özniteliği
    id
    Benzersiz kimlik
    comment
    Belge içi açıklama

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi