הקשר שבין העיצוב והפיתוח : הקדמה
לפני שנכנס לתוך העולם המרתק של הפיתוח, אנחנו נדבר על תעשיית העיצוב ומה מצופה מאיתנו המעצבים של 2017, מהם סוגי הפרויקטים, כלים, מערכות השונות שנעבוד איתם. בנוסף נדבר על ההיסטוריה של האינטרנט, אנשי מפתח שכדאי להכיר, איך האינטרנט והדפדפנים השונים עובדים. מהם תחומי האחריות של html css javascript.
סביבת פיתוח
בחלק הזה נדבר על הכלים הבסיסיים שדרושים בשביל להתחיל לעבוד, למה אנחנו זקוקים לכל אחד מהם ואיך להשתמש בהם.
IDE vs Text Editor vs Codepen Projects. לאחר מכן נכין את סביבת העבודה שלנו (codepen project) ונתחיל לעבוד.
ניהול גרסאות
כל מי שעבד אי פעם בסביבה עם מספר גורמים, במיוחד חברות סטארטאפ שזזות בקצב גבוה, יודע כמה קשה לנהל גרסאות של קבצי עיצוב. המצב הזה היה פעם נכון גם בעולם הפיתוח אך כאשר הוכרה שיטת ה version control system העולם נהיה פשוט יותר. בחלק הזה נדבר על העקרונות מאחורי הגישה ונכיר את github שהוא מאין רשת חברתית לקוד. נדבר על איך מעצבים שעובדים עם sketch כבר היום יכולים להשתמש בכלים דומים כדי לנהל נכון וביעילות את העיצובים שלהם.
הכרת השפה
HTML - השפה של האינטרנט. השפה בעצם מכילה את אבני הבניין הבסיסיות אותם אנחנו נותנים לדפדפן והוא יודע להציג אותם בצורה אותה אנחנו מכירים. זאת בעצם השפה (לא שפת תכנות) הראשונה שאנחנו צריכים להכיר.
נכיר את המושגים השונים בשפה ונלמד איך לבנות את דף האינטרנט התקני הראשון שלנו.
בנוסף נלמד מהם האלמנטים השונים וההגדרות שלהם.
נלמד להשתמש נכון בקישורים, רשימות, תמונות, טפסים, טבלאות וכו׳
נכיר את ה best practices של השפה.
נלמד איך להפוך עיצוב למוצר עובד.
ונדבר אפילו על איך השפה משפיע על קידום במנוע חיפוש.
סמנטיות
נכיר מהו אותו html5 שחולל מהפכה בעולם האינטרנט ואיך הוא בא להחליף את ה flash ״הישן והטוב״
נלמד איך לכתוב קוד סמנטי וקריא יותר
איך להחליט מהי התגית הנכונה לבחור לכל מיני מצבים שונים
ונדבר על טעויות נפוצות ואיך לא ליפול בהם.
הכרת השפה
שפת CSS היא שפה משלימה ל HTML. רוב הנחיות העיצוב נכתבים ב CSS ומרוכזים בקובץ נפרד אליו קשורים כל קובצי ה HTML שבאתר. זאת על מנת לאפשר חלוקת כוחות בין התוכן והעיצוב.
בחלק זה נלמד את תחביר השפה, את עקרונותיה ואת הכללים השונים לעיצוב.
סלקטורים פשוטים ומורכבים
נכסה את נושא הצבעים והרקעים
טיפוגרפיה
וכמובן איך לעמד את התכנים לפי העיצוב.
CSS3
התוספות החדשות שהגיע לשפה כחלק מהשדרוג הגדילו משמעותית את מאגר כלי העיצוב שלנו ב CSS.
נלמד איך לייצר הצללות לטקסטים ואלמנטים
מעברי צבע (gradients)
אנימציות ומיקרו אנימציות.
נלמד איך מוסיפים גופנים מיוחדים וגופני אייקונים
נשתמש ב flexbox עבור סידור הlayout שלנו בצורה יותר יעילה
נכיר את נושא התמיכה בדפדפנים - browser compatibility
עיצוב רספונסיבי
Responsive Design, או בתרגום חופשי "עיצוב תגובתי" היא גישה לעיצוב לאתרים שמטרתה לספק את חווית הצפייה האופטימלית למגוון כמה שיותר רחב של מכשירים, ליתר דיוק מסכים בגדלים שונים. דסקטופ, מובייל וטאבלטים.
אתר אשר עוצב לפי עקרונות אלו הוא אתר אשר יתאים את התצוגה שלו לסביבת השימוש בו ויראה טוב בכל מכשיר וגודל מסך בו הוא יופיע, האלמנטים באתר יגיבו לגודל המסך בו הם מוצגים ויסתדרו בהתאם כדי לספק חוויה אופטימלית.
נדבר על התיאוריה מאחורי הגישה והמוטיבציות השונות.
נדבר על גישות שונות - mobile first vs desktop first
נדבר על דפוסי עבודה שונים - media queries - adaptive וכ׳ו
אנימציות ומיקרו אינטראקציות לשיפור חווית המשתמש
אחד השדרוגים שהגיעו עם CSS3 הוא היכולת להגדיר המעברים ואנימציות. מפתחי צד קדמי (Front-end) בקשו כבר המון זמן את היכולת לממש את האינטראקציות בעזרת HTML ו CSS, ללא שימוש בקוד נוסף ב javascript או מקורות חיצוניים כמו Flash. בעזרת transitions ב CSS3 אנחנו יכולים להגדיר שינויים בעיצוב של אלמנטים במקרה של state change. למשל במעבר עכבר או כשאשר אלמנט במצב focused. אנימציות ב CSS3 מאפשרות לנו לשנות את המראה וההתנהגות של אלמנטים בעזרת הגדרת keyframes. מעברים מאפשרים לנו לשנות את העיצוב ממצב אחד לשני.