Workshop ותחנות
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
בנו חלקי ווב חיים במרחב כתיבה מרובה־חלוניות — עם שלבי בנייה־יחד, משתנים פרמטריים וייצוא HTML עצמאי כשצריך את העמוד מחוץ ל־TeachForge.
ה־AI יכול לנסח טיוטה. אתם מחליטים מה הכיתה רואה.
מהו HTML / CSS / JS
HTML / CSS / JS היא תחנת כתיבת ווב מרובת־חלוניות. כותבים סימון, סגנונות ותסריטים זה לצד זה, מציגים את העמוד ב־iframe מבודד, ו—כשצריך—מייצאים קובץ HTML עצמאי לשימוש מחוץ ל־TeachForge.
זה חשוב בהוראה כי כישורי ווב מקבלים משמעות כשהלומדים רואים את התוצאה מיד. שנו סגנון, צעדו שלב בנייה־יחד או הדגימו עמוד אינטראקטיבי קטן — חי, בלי לפרוס דבר.
למה מורים משתמשים ב-HTML / CSS / JS
הדגמות ווב חיות
הציגו HTML, CSS ו־JavaScript מתנהגים יחד בזמן אמת.
שיעורי בנייה משותפת
לכדו שלבים והציגו אותם שלב־אחר־שלב כדי שהכיתה תעקוב אחרי הבנייה.
ערכות נושא פרמטריות
הניעו צבעים ומשתנים עם פקדים במקום לחפש כל ערך CSS ביד.
דפי עבודה עצמאיים
ייצאו קובץ HTML אחד לשימוש מעבר לתחנה.
ב־TeachForge, HTML / CSS / JS היא תחנת Workshop — שנבנתה לעמודי הוראה, לא רק לקטעי קוד מהירים.
בתוך תחנת HTML / CSS / JS
כמו שאר ה־Workshop, מקבלים קצב כתיבה מוכר — עם שלוש חלוניות במקום אחת.
- עורכי HTML, CSS ו־JS עם החלפת חלוניות מהירה
- רענון Live או ידני לתצוגה מקדימה ב-iframe מבודד
- שלבי בנייה לאורך — מצב לכידה, שלב ו-Present
- משתנים פרמטריים לבקרות ערכה וערך לשימוש חוזר
- מסגרות תצוגת מכשיר וספריות אופציונליות כמו KaTeX
- ייצוא HTML עצמאי, JSON מתקדם, שיתוף, הטמעה ושליחה ל־Whiteboard
איך חלוניות הופכות לעמוד
התחילו מתבנית או ערכו את שלוש החלוניות
הוסיפו שלבים ומשתנים פרמטריים כשהשיעור צריך אותם.
הריצו תצוגה מקדימה Live או Manual
ה־iframe המבודד מציג את העמוד כפי שהלומדים ייפגשו אותו.
הציגו שלבים, ייצאו או שלחו בשידור חי
קחו את התוצאה ללוח, לשאלה, או החוצה כ־HTML עצמאי.
דף אחד. כל גרסה שלו.
התחנה הזו תומכת ב־משתנים פרמטריים ו־שלבי בנייה משותפת: שמרו על מבנה העמוד, שנו את ערכת הנושא, וחשפו את הבנייה בסדר — במקום לתחזק שנים־עשר קבצי HTML כמעט זהים.
שנו תוך כדי הוראה
התאימו ערכים פרמטריים או צעדו לשלב הבא במצב Present.
שמרו על המבנה, שנו את הנושא
אותה חבילת עמוד יכולה להציג מחר הדגשה, מערך נתונים או רמת קושי אחרת.
למדו את הבנייה, לא רק את הסיום
שלבים מאפשרים לכיתה לראות את העמוד מתחבר.
הישארו קרובים להערכה
שמרו את חבילת ה־JSON הניידת והשתמשו בה שוב בשיעורים או במעבדות מאוחרים.
צריכים קטע הרצה־ומסוף מהיר במקום? Code Sandbox היא התחנה האחות לזה. HTML / CSS / JS מיועדת לעמודים כתובים עם שלבים וייצוא.
דפים מוכנים להתחיל מהם
פתחו תבנית ועצבו אותה מחדש לשיעור:
| Area | מה אפשר לפתוח |
|---|---|
| יסודות | ריק; כרטיס פרופיל; מגרש Flexbox |
| בנייה משותפת | שלבי כפתור; מחליף ערכת צבעים |
| אינטראקטיבי | הנפשת קנבס; ממשק Quiz; טבלת נתונים |
עזרת AI בדרך שלכם
צריכים טיוטה ראשונה? השתמשו ב־AI כעוזר — ואז בדקו, ערכו ואשרו לפני שמשהו מגיע ללומדים.
העתיקו את ה־prompt
צרו prompt מוכן והדביקו אותו בכלי הצ׳אט שכבר משתמשים בו.
השתמשו ב־GPU שלכם
חברו נקודת קצה למודל מקומי בהגדרות והריצו יצירה על חומרה שבשליטתכם.
השתמשו במפתח API שלכם
הוסיפו את מפתח הספק בהגדרות, בחרו מודל, וצרו עם החשבון שלכם.
ה־AI יכול לטעות. בדיוק לכן מורה נשאר בלולאה.
קחו את הדף למקום שבו מתרחשת ההוראה
- Whiteboard — שימו אותו על הלוח החי והתאימו מול הכיתה
- Quest Ladder — שימו אותו בשאלות ובהסברים
- Virtual Lab — השתמשו בו שוב בעבודת מעבדה אינטראקטיבית
- Community — שתפו מה שבניתם, ובנו על מה שמחנכים אחרים שיתפו