GAME DEVELOPMENT WITH AI - LESSON 3

המשחק שלך באינטרנט

שיעור 3 - מהמחשב לעולם: פורטפוליו והעלאה לרשת

LIVE

מה נלמד היום?

01 מבנה פרויקט - איך לארגן קבצים כמו מקצוענים
02 אתר פורטפוליו - בית מעוצב לכל המשחקים שלכם
03 העלאה לאינטרנט - לינק אמיתי שכל העולם יכול לפתוח

הבעיה: תקוע במחשב

עכשיו

file:///C:/Users/...
אי אפשר לשלוח בווטסאפ
אי אפשר להשוויץ
רק אני רואה את זה

אחרי היום

dannygames.netlify.app
לינק אמיתי לכל העולם
עובד בנייד ובמחשב
אפשר לשתף עם כולם

היום נהפוך מסתם קובץ לאתר אמיתי.

מבנה פרויקט

MyGameStudio/
  index.html ← דף הבית
  snake.html
  clicker.html

Project Structure = סדר בקבצים.

כמו ארון בגדים מסודר: כל קובץ במקומו, הכל בתיקייה אחת.

מושג חדש: Relative Path

RELATIVE PATH

נתיב יחסי - כתובת קובץ ביחס לקובץ הנוכחי

כשכותבים href="snake.html" בדף הבית,
הדפדפן יודע לחפש את הקובץ באותה תיקייה.
זה מה שמחבר את דף הבית למשחקים.

כמו להגיד "הדלת משמאל" במקום "דלת 5, קומה 3, רחוב הרצל 20, תל אביב". פשוט ויעיל.

מושג חדש: Portfolio

PORTFOLIO

פורטפוליו - אתר תצוגה שמציג את העבודות שלך

הלובי של הקולנוע.
המשחקים שלכם הם הסרטים, והפורטפוליו הוא הלובי שבו בוחרים במה לשחק.
כל מפתח מקצועי צריך אחד.

כמו נטפליקס: המשחקים שלכם הם התכנים. הפורטפוליו הוא הממשק שבו בוחרים.

הפרומפט לפורטפוליו

                // Task

                Create a modern Portfolio website

                for a game developer. Single index.html file.

                // Design

                Theme: Dark Mode with Neon Purple accents.

                Header: Large title "My AI Game Studio".

                // Content

                About section + Games Grid with 2 cards:

                Card 1: "Neon Snake" → snake.html

                Card 2: "Crypto Clicker" → clicker.html

                Add CSS hover effects on cards.

מושג חדש: Responsive

RESPONSIVE DESIGN

עיצוב רספונסיבי - האתר מתאים את עצמו לכל מסך

האתר צריך להיראות טוב גם על מחשב וגם על נייד.
עיצוב רספונסיבי = האתר "מבין" את גודל המסך ומתאים את עצמו אוטומטית.

כמו מים שמתאימים את עצמם לכל כלי. האתר "זורם" לכל גודל מסך.

Hosting - איפה האתר גר?

בלי Hosting

הקובץ במחשב שלך
רק אתה רואה
כתובת: file:///...
כמו מכתב שלא נשלח

עם Hosting

הקובץ בשרת באינטרנט
כל העולם יכול לגשת
כתובת: yoursite.netlify.app
כמו מכתב שנשלח בדואר

Hosting = מחשב שמגיש את האתר שלכם לכל מי שמבקש.

Deployment - ההעלאה לאוויר

DEPLOYMENT

לקחת את האתר מהמחשב ולהעלות אותו לאינטרנט. עם Netlify Drop - זה גרירה אחת.

1

בוחרים תיקייה

←

2

גוררים לדפדפן

←

3

מקבלים לינק!

מושג חדש: URL

URL

Uniform Resource Locator - הכתובת של כל דף באינטרנט.
כמו כתובת של בית: dannygames.netlify.app/snake.html

DOMAIN

שם הדומיין הוא "השם" של האתר שלכם.
Netlify נותנת לכם subdomain בחינם: yourname.netlify.app

מה למדנו היום?

📁

Project Structure

ארגון קבצים בתיקייה מסודרת - הבסיס לכל פרויקט

🎨

Portfolio

אתר תצוגה שמציג את כל המשחקים במקום אחד

🚀

Deployment

העלאת האתר לאינטרנט עם Netlify Drop - בגרירה אחת

📱

Responsive

האתר עובד בכל מסך - מחשב, טאבלט ונייד

שיעורי בית: התאמה אישית!

עדכנו את ה-About Me, שנו צבעים, הוסיפו משחק שלישי...
שלחו את הלינק לחברים!