רספונסיב

קורס בניית אתרים רספונסיביים

מרצה: פנינה אלקבץ 

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

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

מטרת הקורס

  1. כתיבת קוד ובניית אתרים באופן תקני העומד בסטנדרטים המתחייבים כיום.
  2. שליטה והבנה בתכנות צד לקוח.
  3. יכולת להשתלב בצוות מתכנתים ובעבודה על פרויקטים קיימים עפ"י דרישה.

נושאי בסיס שכבר נלמדו ונשוב לתרגל:

  • ניתוח סקיצות עיצוביות ויצירת מבנה HTML תקני בשילוב עבודה עם גיליונות עיצוב CSS
  • עבודה עם כלי המפתחים בדפדפן לאיתור שגיאות ובחינת אלמנטים
  • חידושים ושינויים ב-HTML5 , מאפיינים וחידושים ב- CSS3
  • יצירת מצבים אינטראקטיביים והנפשה במעבר עכבר
  • יצירת אנימציות בסיסיות באמצעותCSS3 ועבודה עם פורמט SVG וקטורי
  • בניית טפסים והיכרות עם פקדי טופס
  • הטמעת רכיבים חיצוניים כגון סרטון יוטיוב, כפתורי שיתוף חברתי, מפות גוגל
  • הטמעת פונטים ייחודיים שנרכשו ברישיון

נושאי הלימוד העיקריים לסמסטר זה:

  • עקרונות בבניית אתרים רספונסיביים (מותאמים למגוון מכשירים), התאמות CSS,
    עבודה עם כלי בדיקה וניטור שגיאות.
  • בניה רספונסיבית מהירה באמצעות פריימוורק "Bootstrap" הפופולרי.
  • הוספת אינטראקטיביות לאתרים – תפריטים נפתחים, גלריות ורכיבי ממשק נוספים.
  • שימוש ברכיבים חיצוניים והטמעת פלאגינים.
  • היכרות עם נושא הנגשת אתרים לבעלי לקויות שונות.

 

כל התכנים בקורס ייושמו בתרגול מעשי בעורך הקוד תוך שימת דגש על כתיבת קוד תקני.

ציון

הגשת תרגילים מדי שבוע, נוכחות
(ללא איחורים ועבודה מוקפדת בהתאם לנלמד)        55%

עבודת אמצע סמסטר                                                   20%

עבודת סוף סמסטר                                                      25% 

 

עבודה שתוגש באיחור- ציון מופחת.
אי הגשת עבודה – ציון שלילי.

ייתכנו שינויים במהלך הסמסטר

 

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

 

בהצלחה ולימודים מהנים :)

פנינה

 

שיעור 1

בשיעור זה נדבר על

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

 

קישור לתיקיית הקבצים, לפי שיעורים

מדריך לפתיחת קובץ זיפ / יצירת קובץ זיפ