Tasarım standardı

Her eklenti Viswoo’nun içinde, Viswoo’nun bir parçası gibi görünür. Standart sekmeleri (Ayarlar, Ekranlar, Önizleme) panel kendisi çizer; sizin yazdığınız sayfalar SDK kitleriyle yazılır. validate ve sunucu kitsiz paketi reddeder; geri kalanı yayın incelemesinde aşağıdaki listeyle denetlenir.

Panel sekmesi ve genel sayfa: viswoo-ui.css

<link rel="stylesheet" href="viswoo-ui.css" />

Kit panelin renklerini, yazı tiplerini (Onest metin, Bricolage Grotesque başlık) ve bileşenlerini verir. Açık/koyu tema html[data-theme] ile gelir; köprü bunu kendisi ayarlar ve panelin teması değişince günceller. Aşağıdaki örnek canlıdır ve bu sayfanın temasını izler.

Sınıf	Ne için
vz-stack, vz-row, vz-grid	Dikey yığın, yatay sıra, kendiliğinden kırılan ızgara
vz-card, vz-card-header	Bölüm kartı ve başlığı (h2 + açıklama p)
vz-button, vz-button-primary, vz-button-ghost, vz-button-sm	Düğmeler; sayfada tek ana düğme
vz-field, vz-label, vz-input, vz-select, vz-textarea, vz-hint, vz-error	Form alanı
vz-table-wrap, vz-table	Tablo; dar ekranda yatay kayar
vz-badge (-ok, -warn, -danger, -live)	Durum rozeti. -live (kehribar) yalnız “yayında” içindir
vz-alert (-ok, -warn, -danger)	Uyarı kutusu
vz-stat, vz-stat-label, vz-stat-value	Sayı kutusu
vz-empty, vz-empty-title, vz-empty-text	Boş durum
vz-muted, vz-small, vz-sr-only, vz-code, vz-code-input	Yardımcılar

Kurallar:

• Renk, yazı tipi ve köşe yarıçapı kitten gelir. Ham renk yalnız içerik için kullanılır (ör. çark dilimi rengi).
• Her veri bölümünün yükleniyor, boş, hata ve izin yok durumu vardır. Hatalar error.code ile anlaşılır metne çevrilir (Hata kodları).
• context.setupComplete false ise sekmeniz kullanıcıyı Ayarlar’a yönlendiren bir uyarı gösterir.
• Yazma işlemleri rolü denetler (context.role; yazma editörden başlar). Kasa gibi her rolün yaptığı iş, düzenlemeden ayrı tutulur.
• 390 px genişlikte yatay taşma yoktur; odak halkası görünür; simge düğmelerinde aria-label vardır.
• Metinler Türkçe ve İngilizcedir (context.language); tarih, sayı ve para Intl ile biçimlenir.
• Sayfa yüksekliği değişince Viswoo.panel.ui.resize(...) çağrılır.

Ekran görünümü: viswoo-screen.css

<link rel="stylesheet" href="viswoo-screen.css" />

pack kiti ve yazı tiplerini görünüme gömer. Kit LG webOS 3.x (Chromium 38) içindir: CSS değişkeni kullanmaz, flex önekli, ölçüler vmin. Varsayılan zemin laciverttir; açık zemin için body.vz-light.

Sınıf	Ne için
vz-screen	Kenarlardan %5 güvenli alanlı tam ekran kap (bazı TV’ler kenarı keser)
vz-flex, vz-center, vz-column, vz-grow	Önekli flex yardımcıları
vz-title, vz-subtitle, vz-text, vz-accent	Başlık, alt başlık, metin (en az 2.6vmin), vurgu
vz-cta	Dokunmatik çağrı düğmesi
vz-panel, vz-qr, vz-code, vz-overlay	Kutu, QR çerçevesi, büyük kod, tam ekran sonuç katmanı
body.vz-light	Açık zemin

Kurallar:

• ES5 yazılır; görünüm tek dosyadır ve en çok 512 KB’tır (Ekran görünümü).
• 3 metreden okunur: metin en az 2.6vmin, kontrast yüksek, hareket yumuşak ve sınırlı.
• Dokunmatik context.touch ile ayrılır; dokunmatik değilse etkileşim telefondan (QR) yapılır.
• Yatay ve dikey ekranda düzen bozulmaz.
• İnternet yokken görünüm açılır; call plugin.offline ile düşer, sakin bir mesaj gösterilir.

Paket görselleri

• Mağaza ikonu: 256 px kare PNG.
• Ekran görünümü varsa en az bir TV görseli (16:9), gerçek görünümden alınmış.
• Menü ikonu listeden.

Yayın kontrol listesi

• viswoo-plugin validate geçiyor
• Ayar formu şemadan; kritik alanlar required, sunucuya özel alanlar x-viswoo-visibility: "server"
• Kendi sekmesi yalnız özel işler; kit sınıfları; yükleniyor, boş, hata, izin yok ve kurulum eksik durumları
• Açık/koyu tema, 390 px, klavye ve ekran okuyucu
• TR/EN metinler; kişisel veri yok ya da gerekçeli
• Ekran görünümü ES5, güvenli alan, okunur metin, dokunmatik ve dokunmatiksiz, yatay ve dikey, çevrimdışı
• TV görseli gerçek görünümden