Transcript
Page 1: דרוש: מעצב עם ידע בפיתוח

:דרוש HTMLמעצב עם ידע בפיתוח

יגאל סטקלוב

Page 2: דרוש: מעצב עם ידע בפיתוח

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

(Front End Development) בנטקראפט

Page 3: דרוש: מעצב עם ידע בפיתוח
Page 4: דרוש: מעצב עם ידע בפיתוח
Page 5: דרוש: מעצב עם ידע בפיתוח
Page 6: דרוש: מעצב עם ידע בפיתוח
Page 7: דרוש: מעצב עם ידע בפיתוח

,PSD-אם אתם עוצרים ב" אתם עוצרים הרבה לפני

."אמצע תהליך העיצוב Andy Rutledge

Page 8: דרוש: מעצב עם ידע בפיתוח

אקטיביעיצוב אינטר

Page 9: דרוש: מעצב עם ידע בפיתוח

:התהליך היום

Page 10: דרוש: מעצב עם ידע בפיתוח

אנחנו צריכים שינוי בתהליך בכדי לפתח מוצרים טובים יותר

Page 11: דרוש: מעצב עם ידע בפיתוח

אנימציות

Page 12: דרוש: מעצב עם ידע בפיתוח

...בעבר הרחוק

Page 13: דרוש: מעצב עם ידע בפיתוח

...והיום

Page 14: דרוש: מעצב עם ידע בפיתוח

?מה היתרונות

חדשותמפתחים ממציאים חוויות -מעצבים

תהליך עבודה יותר חלק

השפעה על התוצר הסופי שהמשתמש חווה

של המפתחים" אי אפשר"-סוף ל

Page 15: דרוש: מעצב עם ידע בפיתוח

מעצב בלי ידע בפיתוח צריך גלגלי עזר

Page 16: דרוש: מעצב עם ידע בפיתוח

...אם חושבים על זה

זה לא מפתיע שהמעצבים "מפתחים"המובילים בעולם הם גם

Page 17: דרוש: מעצב עם ידע בפיתוח

זה לא כזה קשה

Page 18: דרוש: מעצב עם ידע בפיתוח

זה לא כזה קשה

Page 19: דרוש: מעצב עם ידע בפיתוח

<HTML> לא שפת תכנות•

מתארת את תוכן העמוד•

Page 20: דרוש: מעצב עם ידע בפיתוח

HTML – חצי חצי דוגמאת

Page 21: דרוש: מעצב עם ידע בפיתוח

CSS{}

לא שפת תכנות•

מגדירה את נראות האלמנטים בעמוד•

מאפשרת להגדיר אנימציות לשינוי נראות האלמנטים•

Page 22: דרוש: מעצב עם ידע בפיתוח

CSS – חצי חצי דוגמאת

(בלי אנימציה)

Page 23: דרוש: מעצב עם ידע בפיתוח

CSS – חצי חצי דוגמאת

(עם אנימציה)

Page 24: דרוש: מעצב עם ידע בפיתוח

CSS-היתרון של ה

אנחנו מנסים להראות

פה שאפשר להחליף

את העיצוב בקלות

בלבד CSS-בשינוי ה

HTML-בלי לגעת ב

כל הדברים

שמרכיבים

את העמוד

שלנו

CSS

CSS

Page 25: דרוש: מעצב עם ידע בפיתוח

-פה יופיעו דוגמאות מ/http://www.csszengarden.com

אם יש לך רעיון איך להציג אותם אשמח

לשמוע

Page 26: דרוש: מעצב עם ידע בפיתוח

קושיות

שאלות שתמיד רציתם לשאול ולא היה את מי לשאול

Page 27: דרוש: מעצב עם ידע בפיתוח

examples

?CSS3מה זה יותרטובות וחלקות אנימציות

'הצללות וכו, פינות מעוגלות, גרדיאנטים

Page 28: דרוש: מעצב עם ידע בפיתוח

?HTML5מה זה דו ותלת ממדית בדפדפןגרפיקה

וידאו ואודיו בדפדפן

Page 29: דרוש: מעצב עם ידע בפיתוח

?האם מעצב צריך להיות גם מפתח

Page 30: דרוש: מעצב עם ידע בפיתוח

!לאאבל הוא כן צריך להכיר את

האפשרויות וההגבלות, היכולות

Page 31: דרוש: מעצב עם ידע בפיתוח

חוויהזכרו כי אתם מעצבים

עם העיצוב בדפדפן שחקו

אל תתנו למפתחים להרוס לכם

?מה חשוב

Page 32: דרוש: מעצב עם ידע בפיתוח

:התהליך היום

Page 33: דרוש: מעצב עם ידע בפיתוח

התהליך הנכון

Page 34: דרוש: מעצב עם ידע בפיתוח

?איך מתחילים CodeAcademy.com: קורסים אונליין

ספרים ממוקדים של פיתוח למעצבים

באינטרנטמדריכים )+( אלפי

Page 35: דרוש: מעצב עם ידע בפיתוח

?איך מתחילים מפתחים-עוקבים בטוויטר ובבלוגים אחר מעצבים

:מאתגרים את עצמכם

להמיר עיצובים שלכם לקודמנסים

-מהשראה שואבים

קורס בנטקראפט

Page 36: דרוש: מעצב עם ידע בפיתוח

?ואתם, יכולים 10ילדים בני

Codeclub.org.uk

Page 37: דרוש: מעצב עם ידע בפיתוח

כלים לגישור הפער כלים לגישור הפער

Page 38: דרוש: מעצב עם ידע בפיתוח

CS6 Cloud-מובנה בפוטושופ החל מ

CS7-צפוי להשתפר ב

CSS3PS.com

CSS-פוטושופ ל

Page 39: דרוש: מעצב עם ידע בפיתוח

Adobe Edge Animate

Page 40: דרוש: מעצב עם ידע בפיתוח
Page 41: דרוש: מעצב עם ידע בפיתוח

, עליכם להבין כי זה ההווה והעתידולכן עליהם לשלב פיתוח כחלק

.יומית-מתהליך העבודה היום

Page 42: דרוש: מעצב עם ידע בפיתוח

.תודה

סטקלוביגאל יגאל סטקלוב[email protected]