İNTERNETSİZ DİJİTAL OKUL PANOSU PAYLAŞIYORUM.

Kodla Büyü

erbay1

Üye
Mesajlar
5
Untitled 1.webp
a1.webp





🌐 Dijital Okul Panosunun (HTML)Temel Özellikleri ve Yapısı

Tasarım ve Tema:
Koyu renkli, yüksek kontrastlı bir tema kullanır (#010208 siyah/mavi arka plan, #00eaff ve #2bff88 parlak vurgu renkleri). Bu, genellikle büyük ekranlarda (TV veya monitör) uzaktan kolay okunabilirlik sağlamak için tercih edilir.
Veri Kaynağı: Tüm içerik ve ayarlar, önceki Admin Panelinde ayarlanmış olan localStorage verilerinden çekilerek dinamik olarak gösterilir (Örn: dersProgrami, nobetData, largeAnnouncements).
Gerçek Zamanlı Güncelleme: Saat, tarih ve LGS geri sayımı gibi bilgiler her saniye güncellenir (setInterval(..., 1000)).
Kullanıcı Arayüzü Kısıtlaması: Sağ tık menüsü kapatılarak ve admin.html sayfasına yönlendirilir.



📺 İçerik Modülleri (Widget'lar)
Pano, bilgileri düzenli bir şekilde sunmak için üç ana panel ve bir başlık/altbilgiden oluşur.
1. Başlık Alanı (Header)
Okul Kimliği:
Okul Logosu (#logo) ve Okul Adı (#school-name) dinamik olarak gösterilir.
Pano Başlığı: "💠 DİJİTAL PANO 💠" başlığı vurgulanmıştır.
Saat ve Tarih Widget'ı: Gerçek zamanlı Gün Adı, Gün/Ay/Yıl ve Saat:Dakika:Saniye bilgileri gösterilir.
2. Merkez Panel (Center)
Bu alan en büyük ve en dinamik içerikleri barındırır:
Duyuru / Video Widget'ı:
Video Oynatıcı:
Yerel dosyalardan alınan videoları oynatır. Bir video bittiğinde otomatik olarak listedeki bir sonraki videoya geçer (playNextVideo fonksiyonu).
Büyük Duyuru Alanı: Önceden tanımlanmış önemli duyuruları belirli aralıklarla (7 saniyede bir) büyük puntolarla, yavaş geçiş efektiyle gösterir.
3. Sol Panel (Left)
Nöbetçi Öğretmenler Widget'ı:

Mevcut günün nöbetçi öğretmenlerinin listesini nöbet alanlarına göre (Örn: "1.Kat", "Giriş-Bahçe") gösterir.
LGS'ye Kalan Süre Widget'ı:
Yönetim panelinde belirlenen LGS tarihine kadar kalan süreyi (Gün, Saat, Dakika, Saniye) cinsinden geri sayım olarak gösterir.
Hava Durumu Widget'ı:
Harici bir kaynaktan alınan (Örnekte script etiketi ile Sinop hava durumu çekilmiştir) HTML/Widget kodu ile hava durumu bilgisini gösterir.
4. Sağ Panel (Right)
Anlık Ders Programı Widget'ı:
Dinamik Durum:
Mevcut saate göre ders veya teneffüs durumunu algılar.
Ders Saatinde: O anda işlenen dersin hangi sınıfta hangi ders olduğunu gösterir (Örn: "5/A: Matematik").
Teneffüste: "TENEFFÜS" mesajını ve bir sonraki derse kalan süreyi gösterir.
Renklendirme: Dersler, ilgili renk kodları kullanılarak arka plan rengiyle vurgulanır.
Doğum Günleri Widget'ı:
Mevcut gün doğum günü olan öğretmen/öğrenci listesini (Adı ve Sınıfı) gösterir ve "İYİ Kİ DOĞDUN!" mesajını vurgular.
5. Altbilgi Alanı (Footer)
Kayan Duyuru Alanı (Marquee):
Yönetim panelinde girilen metinsel duyuruları ekranın altından yatay olarak sürekli kaydırır.

YÖNETİM PANELİ

⚙️ Sayfanın Temel Özellikleri ve Yapısı (Admin Paneli)
Tema ve Stil:
Koyu tema, kontrastı yüksek, modern bir arayüze sahiptir. Arka plan #080b15 (koyu mavi/siyah) ve vurgu rengi #00eaff (parlak camgöbeği) kullanılmıştır, bu da "dijital pano" konseptine uygun, yüksek teknoloji hissi verir.
Duyarlı Tasarım (Responsiveness): $meta$ etiketi ile width=device-width, initial-scale=1.0 kullanılarak mobil cihazlara uyumlu olması hedeflenmiştir.
Harici Kütüphaneler: xlsx.full.min.js kütüphanesi kullanılarak Excel (.xlsx) dosyalarını okuma ve işleme yeteneğine sahiptir (özellikle Doğum Günleri modülünde kullanılır).
Veri Saklama: Tüm yapılandırma ve veri yönetimini localStorage kullanarak yapar, bu da verilerin sunucuya değil, yerel tarayıcıya kaydedildiği anlamına gelir.
🛠️ Yönetim Modülleri ve İşlevleri
Sayfa, sol menüde listelenen ve sağ içerik alanında yönetilen birden fazla modüle sahiptir.
1. Navigasyon ve Yedekleme
Panel Kontrolü:
"Admin Panelini Kapat" ve "Anasayfaya Dön" düğmeleri içerir.
Veri Yedekleme/Geri Yükleme:
JSON Yedek Al:
Tüm panonun ayarlarını ve verilerini bir JSON dosyasına yedekleme imkanı.
JSON Yedeği Yükle: Bir JSON dosyasından verileri geri yükleme imkanı.
Erbay111@ tarafından geliştirilmiştir.Ticari amaçla olmamak şartıyla herkes kullanabilir geliştirebilir. Ücretsizdir.
 

Ekli dosyalar

  • a5.webp
    a5.webp
    62.8 KB · Görüntüleme: 221
  • a3.webp
    a3.webp
    50.4 KB · Görüntüleme: 179
  • a4.webp
    a4.webp
    28.9 KB · Görüntüleme: 159
  • a6.webp
    a6.webp
    33.3 KB · Görüntüleme: 257
  • LCD_PANO.zip
    LCD_PANO.zip
    1.8 MB · Görüntüleme: 131
Son düzenleme:
Emeğinize, elinize sağlık hocam. Kullanacaklar için çok iyi bir şey.

Birkaç önerim olacak olurda geliştirirseniz diye

Duyuru kısmındaki yer alacak olan metin uzun olursa otomatikman yazıyı küçültecek ya da elle küçültme seçeneği eklenebilir.

Kayan duyuru ve de duyuru kısmında geçiş süreleri ve renk gibi şeylerin elle belirlenebilir olması daha işlevsel olabilir.

Hava durumu, doğum günü gibi bu kısımlar elle değiştirilebilir olsa o kısımları farklı olarak kullanabilirler, mesela en çok kitap okuyan, haftanın sınıfı, haftanın öğrencisi gibisinden.

Ders programları kısmını 3-4 sınıf ekleyip rasgele program ekledim ama çalıştıramadım da burasını hem ders programları hem de yazılı haftasında yazılı tarihlerini senin seçtiğini görüntüleyecek şekilde esnek olarak hazırlanabilir diye düşündüm.

Nöbet Alanları Düzenle kısmında nöbet yerlerinin düzenlendiği gibi nöbetçi öğretmenlerde bir listeye eklense kullanıcı nöbet yerlerinde direk öğretmen ismini seçse daha iyi olabilir. Nöbet yerlerini döndürme var bu güzel ama bazı okullarda çoğu öğretmen çift nöbet tutuyor ve günler sabit olmuyor ondan açılır listeden öğretmen seçmeli olabilir diye düşündüm.

Birde F11 ile tam ekran yapınca kenarlarda kaydırma çubukları çıkıyor kendi kendine kayboluyor tekrar çıkıyor. Çıktığında ise alttaki kayan duyuru kısmı net görülmüyor. Bu benim denediğim ekranla alakalı da olabilir, benlik değil genel bir durumsa bunu da paylaşmak isterim.


Biraz karıştırdım düşüncelerimi paylaşmak istedim. tekrardan teşekkür ederim.


Ekleme:
Ders programında saatleri düzenlemediğim için göstermiyormuş sorun buymuş düzeltince çözüldü.
Birde ders saati görseli eklenebilir ya video duyuru kısmına ya da nöbet kısmına. Video duyuruya resim eklenirse varsayılan bir yaniye görüntülenmesi sağlanabilir ya da elle süre yazılması sağlanabilir.
 
Son düzenleme:
Emeğinize, elinize sağlık hocam. Kullanacaklar için çok iyi bir şey.

Birkaç önerim olacak olurda geliştirirseniz diye

Duyuru kısmındaki yer alacak olan metin uzun olursa otomatikman yazıyı küçültecek ya da elle küçültme seçeneği eklenebilir.

Kayan duyuru ve de duyuru kısmında geçiş süreleri ve renk gibi şeylerin elle belirlenebilir olması daha işlevsel olabilir.

Hava durumu, doğum günü gibi bu kısımlar elle değiştirilebilir olsa o kısımları farklı olarak kullanabilirler, mesela en çok kitap okuyan, haftanın sınıfı, haftanın öğrencisi gibisinden.

Ders programları kısmını 3-4 sınıf ekleyip rasgele program ekledim ama çalıştıramadım da burasını hem ders programları hem de yazılı haftasında yazılı tarihlerini senin seçtiğini görüntüleyecek şekilde esnek olarak hazırlanabilir diye düşündüm.

Nöbet Alanları Düzenle kısmında nöbet yerlerinin düzenlendiği gibi nöbetçi öğretmenlerde bir listeye eklense kullanıcı nöbet yerlerinde direk öğretmen ismini seçse daha iyi olabilir. Nöbet yerlerini döndürme var bu güzel ama bazı okullarda çoğu öğretmen çift nöbet tutuyor ve günler sabit olmuyor ondan açılır listeden öğretmen seçmeli olabilir diye düşündüm.

Birde F11 ile tam ekran yapınca kenarlarda kaydırma çubukları çıkıyor kendi kendine kayboluyor tekrar çıkıyor. Çıktığında ise alttaki kayan duyuru kısmı net görülmüyor. Bu benim denediğim ekranla alakalı da olabilir, benlik değil genel bir durumsa bunu da paylaşmak isterim.


Biraz karıştırdım düşüncelerimi paylaşmak istedim. tekrardan teşekkür ederim.


Ekleme:
Ders programında saatleri düzenlemediğim için göstermiyormuş sorun buymuş düzeltince çözüldü.
Birde ders saati görseli eklenebilir ya video duyuru kısmına ya da nöbet kısmına. Video duyuruya resim eklenirse varsayılan bir yaniye görüntülenmesi sağlanabilir ya da elle süre yazılması sağlanabilir.
(Hava durumu, doğum günü gibi bu kısımlar elle değiştirilebilir olsa o kısımları farklı olarak kullanabilirler, mesela en çok kitap okuyan, haftanın sınıfı, haftanın öğrencisi gibisinden.)Kullanıcılar için resim+ metin içerikli yeni modül oluşturabilme seçeneği daha işlevsel olur. Yer kaplamaması için aynı alanda sıra ile değişen modüller olabilir. Ders programı modülünde zil sesi eklenebilir, tenefüs saatlerinde öğrencilere (sınıfı havalandıralım, yerlere çöp atmayalım çarpıcı uyarılar çıkabilir. Dediklerinizin hepsi yapılabilir. Tek sorun hepsi index.html sayfasında olacak.İframe sıkıntılı artık tercih edilmiyor. Fetch için ise local host kurmak gerekir. Amacım tek sayfada veri tabansız basit bir pano oluşturmaktı... saygılar
 
Son düzenleme:
(Hava durumu, doğum günü gibi bu kısımlar elle değiştirilebilir olsa o kısımları farklı olarak kullanabilirler, mesela en çok kitap okuyan, haftanın sınıfı, haftanın öğrencisi gibisinden.)Kullanıcılar için resim+ metin içerikli yeni modül oluşturabilme seçeneği daha işlevsel olur. Yer kaplamaması için aynı alanda sıra ile değişen modüller olabilir. Ders programı modülünde zil sesi eklenebilir, tenefüs saatlerinde öğrencilere (sınıfı havalandıralım, yerlere çöp atmayalım çarpıcı uyarılar çıkabilir. Dediklerinizin hepsi yapılabilir. Tek sorun hepsi index.html sayfasında olacak.İframe sıkıntılı artık tercih edilmiyor. Fetch için ise local host kurmak gerekir. Amacım tek sayfada veri tabansız basit bir pano oluşturmaktı... saygılar
Teşekkürler, okulumda kullanma şansım yok ama kullanacaklar için muhakkak faydalı olacaktır.
 
tebrikler hocam çok pratik olmuş önerilerle geliştirilirse daha da harika olabilir👏
 
ilksms
Geri
Üst