לוח החדשות של מרכז תע"ץ – TaazTV
לוח חדשות ומודעות דיגיטלי למסכים ברחבי מרכז תע"ץ, שמעדכנים בהקלדה ישירות על הכרטיסים.
01 / האתגר
ביחידה יש זרם קבוע של מידע לאנשים שבה: חדשות, הודעות, אירועים, הנחיות בטיחות, הלו"ז של היום והמספרים שצריך לחייג אליהם בחירום. על דפים מודפסים המידע הזה מתיישן מהר, וכל שינוי דורש להדפיס ולתלות דף חדש.
הרעיון היה לוח דיגיטלי אחד למרכז תע"ץ, שיוצג על מסכים ברחבי היחידה. הוא היה צריך להתאים למקום: לרוץ על מחשב רגיל ברשת סגורה, בלי אינטרנט, ולהיות פשוט מספיק כדי שאנשי צוות שאינם טכניים יוכלו לעדכן אותו בעצמם.
- מודעות מודפסות מתיישנות מהר
- אין דרך להציג מודעה רק כשהיא רלוונטית
- רשת סגורה: אין חיבור לאינטרנט
- מי שמעדכנים את הלוח אינם מתכנתים
02 / מה בניתי
TaazTV הוא לוח דיגיטלי לכל מסך רחב. מסך אחד מציג את שם היחידה עם השעון והתאריך העברי והלועזי, תפריט, את הלו"ז של היום כשהאירוע הנוכחי מודגש, את טלפוני החירום והשלוחות הפנימיות, ופס מבזקים. האזור המרכזי הוא לוח נע של כרטיסי מודעות בשמונה סגנונות, או מצגת ברוחב מלא.
אנשי הצוות מנהלים אותו מפאנל ניהול בעברית, בדפדפן. פותחים כרטיס ומקלידים ישירות עליו, גוררים פריטים כדי לסדר אותם, מוסיפים תמונות וקודי QR, וקובעים מתי כל פריט יופיע. כל שינוי מופיע במסך מיד, והלוח כולו עובד בלי חיבור לאינטרנט.
איך זה נבנה
- 15 בספט׳ 2026אב-טיפוס, מבנה המסך ועיצובלוח ראשון בעמוד אחד וחלוקה לארבעה אזורים, ומהם עיצב Claude Design את מסך התצוגה ואת פאנל הניהול.
- 17 בספט׳, 12.00לוח ופאנל שעובדיםעם Claude Code העיצובים הפכו למסך תצוגה ולפאנל ניהול שעובדים ומסונכרנים בלי רענון, עם חיתוך תמונות וגיבוי.
- 17 בספט׳, 13.00סבב הערותמזג אוויר אמיתי, ביטול וביצוע מחדש, תאריך עברי באותיות, וחלון תצוגה חיה שאפשר לגרור ולשנות את גודלו.
- 17 בספט׳, 16.00הכרטיס הופך לעורךבחירת סוג כרטיס לפי שרטוטים, סידור בגרירה בכל רשימה, קודי QR על כרטיסים, ועריכה במקום עם קוד הציור של המסך עצמו.
- 17 בספט׳, 20.00אופליין, רשימה אחת, תזמוניםגופנים ששמורים בתוך הפרויקט, גלילה אינסופית חלקה, כרטיסים ושקופיות מרשימה אחת, וחלונות זמן שבועיים.
- 17 בספט׳, 21.30קודי QR שבאמת נסרקיםטלפונים לא הצליחו לקרוא את הקודים של המקודד שנכתב ידנית. החלפתי אותו בספרייה מוכחת ואימתתי 254 קודים.
- 22 בספט׳ 2026בספריית הקוד של תע"ץהקוד, עם כל ההיסטוריה שלו, פורסם ב-GitHub, בארגון הפרטי של תע"ץ.
03 / דגשים
מסך אחד, שישה אזורים
שם היחידה, שעון ותאריכים, תפריט, לו"ז יומי, מספרי חירום, פס מבזקים ולוח מודעות נע – הכול על מסך אחד.
עריכה על הכרטיס עצמו
לוחצים על הכותרת ומקלידים, לוחצים על התמונה כדי להחליף אותה. כל שינוי מופיע במסך מיד, בלי רענון.
קודי QR שבאמת נסרקים
לכל כרטיס אפשר להצמיד קוד QR שפותח בטלפון את הכתבה המלאה, עם סמל תע"ץ באמצעו. כל קוד שנבדק נסרק נכון.
מודעות לפי לוח זמנים
אפשר להגביל כל אזור או כרטיס לימים ולשעות מסוימים, למשל תדריך שמוצג רק בין 15.00 ל-19.00 בימי חמישי.
עובד בלי אינטרנט
הלוח רץ בדפדפן של מחשב רגיל ברשת סגורה, בלי חיבור לאינטרנט. לחיצה כפולה מפעילה אותו.
פיתוח בסיוע AI
עוצב ב-Claude Design ונכתב עם Claude Code בהכוונה שלי: אני קבעתי את הדרישות, עברתי על כל שינוי ואימתתי אותו במדידה.
04 / מסכים
13 מסכים · נתוני דמההערת עיצובמבנה המסך היה שלי לפני כל עיצוב חזותי: ארבעה אזורים על במה של 1920 × 1080, סרגל עליון, הלוח, עמודת צד של שליש ופס מבזקים. אחר כך Claude Design עיצב אותו בהכוונה שלי, והלוח למטה משרטט את התוצאה בקנה מידה. הצוות עורך ישירות על הכרטיס, והתוצאה נבדקה במדידה: 254 קודי QR נקראו בחזרה, והגלילה נמדדה פריים אחר פריים.
05 / מה הפרויקט נותן
TaazTV מרכז את החדשות, ההודעות, הלו"ז ומספרי החירום של היחידה במסך חי אחד שמנהל את עצמו: פריטים עולים ויורדים לפי לוח הזמנים שלהם, ואנשי הצוות יכולים לשנות כל דבר מפאנל הניהול בלי מתכנת. הוא רץ ברשת סגורה כמו שהיא, בלי חיבור לאינטרנט ובלי שירותים חיצוניים.
הפרויקט גם מראה איך אני עובד עם כלי AI: קבעתי את הדרישות, הכוונתי את Claude Design לעיצוב ואת Claude Code לקוד, ואז עברתי על כל שלב והחזקתי את התוצאה ברף איכות שנמדד בפועל: כל סגנונות קודי ה-QR נבדקו בקורא נפרד, הגלילה נמדדה, והעורך הושווה למסך התצוגה עד ששניהם היו זהים.
06 / התפקיד והטכנולוגיה
בניתי את TaazTV לבד, מאב-הטיפוס הראשון ושרטוט מבנה המסך ועד המוצר המוגמר: מסך התצוגה, פאנל הניהול, מבנה הנתונים וההפעלה בלי אינטרנט.
עבדתי עם כלי AI כמו ראש צוות עם צוות מהיר: Claude Design יצר את העיצוב החזותי, ו-Claude Code כתב איתי את הקוד, ב-14 מתוך 15 הקומיטים. אני קבעתי את הדרישות, הכוונתי כל שלב, עברתי על התוצאות ובדקתי אותן במדידה. כשקודי ה-QR הראשונים לא נקראו בטלפונים, החלפתי את המקודד שנכתב ידנית בספריית קוד פתוח מוכחת ואימתתי 254 קודי בדיקה לפני שסגרתי את הנושא.
טכנולוגיות
- HTML
- CSS
- JavaScript
- localStorage
- BroadcastChannel
- SVG
- qrcode-generator
- Intl (לוח השנה העברי)
- Python http.server
- Open-Meteo (אופציונלי)
- Claude Design
- Claude Code
איך זה בנוי
הלוח הוא אפליקציית ווב פשוטה ב-HTML, CSS ו-JavaScript, בלי פריימוורק, בלי שלב בנייה ובלי שום הורדה בזמן ריצה. שרת מקומי קטן, שעולה בלחיצה כפולה, מגיש שני עמודים במחשב שמחובר למסך: מסך התצוגה ופאנל הניהול. התוכן נשמר באחסון של הדפדפן עצמו, וכל שינוי משודר מיד למסך התצוגה הפתוח. המסך והעורך מציירים כרטיסים באותו קוד, ולכן הם תמיד זהים. קודי ה-QR נוצרים בספריית קוד פתוח מוכחת ששמורה בתוך הפרויקט. העיצוב החזותי נוצר ב-Claude Design והקוד נכתב עם Claude Code, בהכוונה ובבדיקה שלי.
מסך חי אחד לחדשות ולהודעות של היחידה, שמעדכנים בהקלדה ישירות על הכרטיסים.
נבנה ביום אחד עם כלי AI שהכוונתי, ונבדק במדידה.