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

הפרויקט הראשון: עמוד שירות עם טופס

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

כדי שהפרויקט יסתיים, הגבילו אותו מראש:

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

אילו מיומנויות צריך כדי לבנות אותו

מבנה ותוכן ב-HTML

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

עיצוב רספונסיבי ב-CSS

העמוד צריך להתאים את עצמו לרוחב המסך. השורה הראשונה שכדאי להכיר היא תגית ה-viewport: לפי מדריך web.dev של Google, עמוד שמותאם למכשירים שונים צריך לכלול אותה, ובלעדיה הוא נטען מוקטן מאוד והטקסט קשה לקריאה.

<meta name="viewport" content="width=device-width, initial-scale=1">

טופס שעובד

לטופס יש שני חלקים: מה שהגולש רואה, ומה שקורה לנתונים אחרי הלחיצה על ״שליחה״. החלק הראשון הוא HTML. החלק השני דורש צד שרת, למשל תוסף טפסים במערכת ניהול תוכן, סקריפט בשרת או שירות טפסים חיצוני. MDN מזכירים שבדיקת התקינות של הדפדפן אינה תחליף לבדיקה בצד השרת לפני שהנתונים נשמרים.

כך נראה הטופס של עמוד הדוגמה:

<form action="/contact" method="post">
  <label for="name">שם מלא</label>
  <input id="name" name="name" type="text" autocomplete="name" required>

  <label for="phone">טלפון</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel" required>

  <label for="email">אימייל (לא חובה)</label>
  <input id="email" name="email" type="email" autocomplete="email">

  <label for="msg">מה קרה למזגן?</label>
  <textarea id="msg" name="message" rows="4"></textarea>

  <p>נשתמש בפרטים רק כדי לחזור אליכם בעניין הפנייה. אתם לא חייבים למסור אותם,
     אבל בלעדיהם לא נוכל לחזור אליכם. <a href="/privacy">מדיניות הפרטיות</a></p>
  <button type="submit">שליחה</button>
</form>

מה כל חלק עושה:

פרטיות ונגישות

טופס פנייה אוסף מידע אישי. לפי סעיף 11 לחוק הגנת הפרטיות, מי שמבקש מאדם מידע אישי לשם עיבודו במאגר צריך למסור לו הודעה: האם הוא חייב למסור את המידע או שזה תלוי בהסכמתו, ומה המשמעות אם לא יסכים; לאיזו מטרה מתבקש המידע; מי בעל השליטה ואיך פונים אליו; למי המידע יימסר ולאילו מטרות; ושיש לו זכות לעיין במידע ולבקש לתקן אותו. הטופס כאן מדגים מבנה ושדות. לפני שימוש בפועל, התאימו את הודעת היידוע כך שתציג את הפרטים הנדרשים בעת איסוף המידע. לאתר עסקי כדאי לבדוק את הנוסח מול גורם מוסמך; מה שכתוב כאן אינו ייעוץ משפטי.

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

בדיקות בסיסיות לפני שמפרסמים

בדיקה במובייל

בדיקה במקלדת

בדיקה אוטומטית, ומה היא לא תופסת

כלי בדיקה אוטומטיים חוסכים זמן, אבל לא מחליפים את הבדיקות הידניות. Lighthouse בכלי המפתחים של Chrome מריץ בדיקות נגישות אוטומטיות, אבל צוות Chrome מדגיש שגם ציון 100 לא מבטיח שהעמוד נגיש, ושבדיקה ידנית עדיין חשובה.

מה נבדק בפועל בטופס שבכתבה

הטופס שבכתבה נבדק בעמוד דוגמה בדפדפן Chrome (גרסת Chrome for Testing 153, ללא ממשק גרפי) באמצעות Playwright. נבדק שאין גלילה לרוחב ברוחב מסך של 390 פיקסלים; שסדר המעבר ב-Tab הוא שם, טלפון, אימייל, הודעה, קישור הפרטיות וכפתור השליחה, עם מסגרת פוקוס גלויה בכל שלב בעיצוב של עמוד הדוגמה; ש-Shift+Tab חוזר אחורה; שלחיצה על התווית ״טלפון״ מעבירה את הפוקוס לשדה; שטופס עם שם חסר ואימייל לא תקין נחסם; ושלחיצה על Enter בשדה הטלפון שולחת טופס תקין. לא נבדקו קוראי מסך, מקלדות של טלפונים אמיתיים ולא הצד של השרת.

מה צריך כדי להעלות את האתר ולתחזק אותו

שאלות על התרגול לפני שבוחרים מסלול לימוד

אחרי שברור מה הפרויקט הראשון דורש, אפשר לבדוק מסלולי לימוד לפי שאלה אחת: האם הם מביאים אתכם עד לאתר שעולה לאוויר ומתוחזק. שאלו את המוסד:

  1. האם במהלך הקורס אעלה אתר לכתובת אמיתית, ולא רק אריץ אותו על המחשב שלי?
  2. מי בודק את הקוד או את האתר שלי, ותוך כמה זמן מגיע משוב?
  3. האם יש משוב מפורש על מובייל, מקלדת ונגישות?
  4. האם מתרגלים תחזוקה: עדכון, גיבוי ושחזור מגיבוי?
  5. האם הפרויקטים אישיים, או שעובדים רק בקבוצות?
  6. האם הפרויקט המסכם נשאר שלי, כולל הקוד והקבצים?
  7. באילו כלים משתמשים בקורס, ואילו מהם בתשלום אחרי שהוא מסתיים?

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