- הוסף לסימניות
- #1
העיקרון הוא פשוט אנחנו מבקשים מה-AI לכתוב לנו קוד בשפה שנקראת HTML. זו השפה של דפדפני האינטרנט, וכל מה שצריך כדי להריץ אותה זה דפדפן (כמו כרום) וקובץ טקסט פשוט.
הדרך הקשה.
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
בתקווה שהיה מספיק ברור, אשמח לתגובות
.
אז את האמת כל דבר שתרצו כמעט אבל הנה כמה רעיונות
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"
1. איך לבקש את הקוד מה-AI (פרומפטינג נכון)
כדי לקבל תוצאה טובה בClaude, Gemini או ChatGPT, כדאי לעקוב אחרי המבנה הזה:- הגדרת המטרה "תבנה לי אפליקציית תרגום אנגלית בקובץ HTML אחד".
- הגדרת פיצ'רים אני רוצה שיהיה כפתור השמעה, מקום להזין מילים ושמירה אוטומטית וכו".
- הנחיה טכנית מומלץ לכתוב רכז את כל הקוד (HTML, CSS, JS) בקובץ אחד בלבד". זה יחסוך התעסקות עם הדבקה של כמה קודים.
- בקשה לעיצוב: לבקש את הסגנון שאתם רוצים
2. איך לעבוד עם הכלים השונים
א. עבודה ב-Claude (קלוד)
קלוד נחשב כיום לטוב ביותר בכתיבת קוד למשתמשים ביתיים בזכות פיצ'ר ה-Artifacts והורדה של קובץ HTML מוכן!- כתבו לו הנחייה (לפעמים הוא ישאל אתכם כמה שאלות)
- בתשובה ייפתח חלון לבן בצד ימין שם תראו את ה"אפליקציה" רצה בשידור חי.
- יש לו פשוט כפתור הורדה
- כדי לקחת את הקוד: לחץ על כפתור "Code" בתחתית החלון ואז על "Copy".
אז רציתי ליצור משחק זיכרון פשוט ביקשתי ממנו עם פירוט מה אני רוצה והנה התוצאה
למטה
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף
ב. עבודה ב-Gemini (ג'מיני) ובChatGPT
- בקשו את הקוד. הוא יכתוב אותו בתוך בלוקים.
- מעל כל בלוק קוד יש כפתור קטן של העתקה.
- לפתוח קובץ חדש של פנקס רשימות (מסמך טקסט) במחשב ולהדביק שם את הקוד
- לסגור את הקובץ בסיומת HTML ולבחור ב"שמור כסוג" כל הקבצים (שימו לב בברירת מחדל הוא שומר על txt).
- למי שיש VS Code אז זה כמובן הכי פשוט וקל.
3. איך להריץ ולערוך
כדי להפעיל פשוט ללכת לקובץ ששמרתם וללחוץ עליו פעמיים. הוא ייפתח בדפדפן ויעבוד כמו אתר אינטרנט אמיתי.איך עורכים?
רוצים לשנות משהו? או שרוצים להרחיב את מאגר המילים שלו או איזה מאגר שעשיתם?הדרך הקשה.
- לחצו קליק ימני על הקובץ ששמרתם בחר ב-"פתח באמצעות" (Open with) -> "פנקס רשימות".
- שנו את מה שאתה רוצים (או להדביק קוד חדש (או מאגר נתונים/מילים) שקיבלתם מה-AI).
- לחצו Ctrl + S (שמירה) ורענן את הדף בדפדפן כדי לראות את השינוי.
- הורידו את VS Code או לייתר דיוק את Visual Studio Code (חפשו בגוגל).
- תפתחו את הקוד באמצעות VS Code הוא יופיע לכם צבעוני והמבנה יהיה ברור יותר.
- שנו כרצונכם (בדרך כלל השמירה אוטומטית).
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
קוד:
<!DOCTYPE html>
<html>
<head>
<style> /* CSS - איך זה נראה? */ </style>
</head>
<body>
<div id="game">
<h1>המשחק שלי</h1>
<button>לחץ כאן</button>
</div>
<script>
/* JavaScript - מה זה עושה? */
// כשלוחצים על הכפתור, תעשה משהו...
</script>
</body>
</html>
בתקווה שהיה מספיק ברור, אשמח לתגובות
הנושאים החמים