🎯 מבוא

מה זה Web Playground?

Web Playground הוא כלי מקוון המאפשר לך:

  • ✏️ לערוך ולהריץ קוד HTML
  • 🔌 לבדוק ממשקי API
  • 📱 ליצור קודי QR

למי הכלי מיועד?

מפתחים

לבדיקות מהירות וניפוי שגיאות

מעצבים

להצגת אבות טיפוס ורעיונות

סטודנטים

ללימוד תכנות ואינטראקציה

בעלי אתרים

לבדיקות בסיסיות ותחזוקה

דרישות מערכת

  • דפדפן אינטרנט עדכני
  • חיבור אינטרנט (ל-API tester)
  • אין צורך בהתקנה - הכל רץ בדפדפן!

✏️ עורך HTML

התחלה מהירה

  1. גישה לעורך - הקוד שלך נמצא בחלונית השמאלית, התוצאה מוצגת בחלונית הימנית
  2. הפעלת הקוד - לחץ על "▶️ הפעל קוד" או "🔄 רענן"
  3. ניקוי העורך - לחץ על "🧹 נקה הכל"

מצב מסך מלא

לחץ על "📺 מסך מלא" לתצוגה מלאה • מקש Escape לחזרה • לחיצה מחוץ לחלונית לסגירה

דוגמת קוד לדוגמה

<!DOCTYPE html> <html> <head> <title>הדף שלי</title> <style> body { background: lightblue; text-align: center; padding: 50px; } </style> </head> <body> <h1>שלום עולם!</h1> <button onclick="alert('ברכות!')">לחץ כאן</button> </body> </html>

טיפים לעורך

עשה

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

אל תעשה

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

🔌 בודק API

מושגי יסוד

API - ממשק תכנות יישומים

HTTP Methods - שיטות בקשה:

GET - קבלת נתונים
POST - שליחת נתונים
PUT - עדכון נתונים
DELETE - מחיקת נתונים

שלבים לבדיקת API

  1. הגדרת הבקשה - בחר שיטת בקשה, הזן URL ולחץ "📤 שלח"
  2. הוספת פרמטרים - לחץ "➕ פרמטר" להוספת query parameters
  3. הוספת headers - לחץ "➕ כותרת" להוספת headers חשובים
  4. JSON body - הזן JSON body לבקשות POST/PUT/DELETE

דוגמאות מעשיות

קבלת נתונים (GET)
URL: https://jsonplaceholder.typicode.com/posts/1 Method: GET
שליחת נתונים (POST)
URL: https://jsonplaceholder.typicode.com/posts Method: POST Headers: Content-Type: application/json Body: {"title": "test", "body": "content", "userId": 1}

קריאת תגובות

סטטוס קודים נפוצים:

200 - הצלחה
201 - נוצר
400 - בקשה שגויה
401 - לא מאושר
404 - לא נמצא
500 - שגיאת שרת

📱 יצירת QR Codes

יצירה מהירה

  1. בחירת סוג תוכן - בחר את סוג ה-QR code הרצוי מהתפריט הנפתח
  2. הזנת תוכן - מלא את הפרטים המתאימים לסוג התוכן שבחרת
  3. יצירת הקוד - לחץ על "🎨 צור QR"
  4. הורדה - לחץ על "💾 הורד QR"

תכונות מתקדמות

המרת קידוד לעברית

לחץ על "🌐 המר לכתובת באנגלית" להמרת טקסט עברי לקידוד URL תקין. הכרחי לקישורים בעברית!

שימוש בקישור מה-API tester

לחץ על "🔄 מהקישור למעלה" להעתקה אוטומטית של ה-URL מה-API tester. שימושי לבדיקות ופיתוח!

🔠 סוגי QR Codes

מגוון אפשרויות ליצירת QR

מחולל ה-QR codes שלנו תומך בסוגי תוכן שונים, כל אחד עם אפשרויות ייחודיות:

טקסט רגיל
QR code להצגת טקסט פשוט

שימוש: הצגת הודעות, ציטוטים, מידע כללי

דוגמה: "שלום! בואו לבקר באתר שלנו"
קישור URL
QR code שמפנה לאתר אינטרנט

שימוש: הפניה לאתרים, דפי נחיתה, פרופילים

דוגמה: https://example.com
רשת WiFi
QR code לחיבור אוטומטי ל-WiFi

פרמטרים: שם רשת, סיסמה, סוג הצפנה

דוגמה: SSID: HomeNetwork, סיסמה: MyPassword123
הודעת SMS
QR code לשליחת הודעת SMS מוכנה

פרמטרים: מספר טלפון, תוכן ההודעה

דוגמה: למספר 050-1234567: "היי, נשמח לשוב אליך!"
אימייל
QR code לשליחת אימייל מוכן

פרמטרים: כתובת, נושא, תוכן ההודעה

דוגמה: ל: info@example.com, נושא: פנייה, תוכן: שלום רב...
מספר טלפון
QR code לחיוג אוטומטי למספר

פרמטרים: מספר טלפון

דוגמה: 03-1234567

המרה אוטומטית בין סוגים

כאשר אתה משנה את סוג התוכן, הטופס מתאים את עצמו אוטומטית עם השדות המתאימים:

  • בחירה ב-WiFi מציגה שדות ל-SSID, סיסמה וסוג הצפנה
  • בחירה ב-SMS מציגה שדות למספר טלפון והודעה
  • בחירה באימייל מציגה שדות לכתובת, נושא ותוכן
  • התוכן נוצר אוטומטית בפורמט המתאים לסוג הנבחר

🎨 אפשרויות מתקדמות

עיצוב ומיקוד

התאם אישית את מראה ה-QR code שלך עם אפשרויות עיצוב מתקדמות:

צבעים מותאמים

שנה את צבע ה-QR וצבע הרקע

גודל מתכוונן

התאם את גודל ה-QR code לפי הצורך

הורדה באיכות גבוהה

שמור כ-PNG באיכות מעולה

תצוגה מקדימה

צפה בתוצאה הסופית לפני ההורדה

טיפ לעיצוב

לשימוש מיטבי, השתמש בצבעים מנוגדים (כהה על בהיר) כדי להבטיח שהקוד ייסרק בקלות. הימנע מצבעים דומים מדי ל-QR ולרקע.

יישומים ושימושים

QR codes שימושיים במגוון רחב של תרחישים:

שימושים מומלצים

  • אתרים ומדיה חברתית - קישורים לאתר, פרופילים, דפי נחיתה
  • שיווק ופרסום - קמפיינים, מבצעים, קופונים
  • אירועים - הזמנות, תוכניות, מיקומים
  • עסקים - כרטיסי ביקור, תפריטים, פרטי התקשרות
  • נדל"ן - פרטי נכסים, סיורים וירטואליים

שימושים שכדאי להימנע מהם

  • מידע רגיש - סיסמאות, פרטים אישיים
  • קישורים ארוכים מדי - עלולים ליצור QR codes צפופים
  • תוכן לא רלוונטי - משתמשים מתאכזבים כשהתוכן לא תואם לציפיות
  • קישורים לא בטוחים - HTTP במקום HTTPS

🚀 טיפים ושימושיים

קיצורי דרך

Escape - יציאה ממצב מסך מלא Ctrl+A (Cmd+A) - סימון כל הטקסט Ctrl+C (Cmd+C) - העתקה Ctrl+V (Cmd+V) - הדבקה

פתרון בעיות נפוצות

בעיה: הקוד לא רץ

פתרון:

  • בדוק אם יש שגיאות תחביר
  • וודא שכל התגיות סגורות
  • נסה את דוגמת הקוד המובנית
בעיה: API לא עובד

פתרון:

  • בדוק את ה-URL
  • וודא את שיטת הבקשה
  • בדוק אם צריך headers מיוחדים
בעיה: QR code לא נסרק

פתרון:

  • וודא שהקישור תקין
  • המר קישורים בעברית
  • נסה קוד פשוט יותר
  • בדוק ניגודיות צבעים

טיפים ל-QR codes

עשה

  • בדוק את הקוד לפני שימוש
  • השתמש בקישורים קצרים
  • התאם את הגודל לשימוש
  • הוסף תיאור מתחת ל-QR
  • שמור על ניגודיות טובה

אל תעשה

  • אל תצפה יותר מדי מידע
  • אל תשתמש ברזולוציה נמוכה
  • אל תשכח לבדוק את הקישור
  • אל תשנה צבעים בצורה שפוגעת בקריאות

📞 תמיכה ועזרה

שאלות נפוצות

❓ האם הנתונים שלי נשמרים?

לא, הכלי רץ בדפדפן שלך בלבד. שמור את הקוד החשוב אצלך!

❓ האם אפשר להשתמש ב-APIs מאובטחים?

כן, אבל היזהרו מחשיפת API keys. מומלץ להשתמש ב-APIs ציבוריים לבדיקות.

❓ האם הקודים שלי בטוחים?

כן, הכלי רץ locally בדפדפן שלך. אין שליחה לשרתים חיצוניים.

❓ איזה סוגי QR codes נתמכים?

המערכת תומכת בטקסט, URL, WiFi, SMS, אימייל ומספרי טלפון.

🎉 סיכום

למתחילים

ללמוד HTML בצורה ויזואלית, להבין איך APIs עובדים, ליצור קודי QR בקלות

למתקדמים

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

לכולם

חיסכון בזמן, עבודה נוחה ואינטואיטיבית, ללא צורך בהתקנות

מאחלים לכם עבודה נעימה ומוצלחת! 🚀

הכלי זמין לשימוש מיידי - התחילו לחקור וליצור!